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就完成了
现在就可以使用基础的路由了