react中 路由的基础配置

2018-10-18  本文已影响0人  七月柒丶

react路由的使用

React-router

React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api。

React-router-dom

React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转,大多数情况下我们是这种情况,所以在开发过程中,我们更多是使用React-router-dom。

一. 安装react-router-dom

使用命令行 npm i react-router-dom --save 安装

二.在src下新建一个目录 router 在router 下新建一个index.js

三.引入要加入路由的组件   并从react-router-dom中引入需要用的组件 在这里使用browserrouter 

四.写一个class  在render中配置路由 

    LInk标签的to 表示跳转路径   

    Route中Path 表示 路由路径  component  是相对应组件

    

   最后记得导出

五.在app.js中引入这个routerIndex就完成了

现在就可以使用基础的路由了   

上一篇下一篇

猜你喜欢

热点阅读