首先我们先安装 react-router-dom (react4.0的路由)
yarn add react-router-dom
cnpm i react-router-dom -s
如何使用？
在react中路由配置项都是组件
凡是被路由包裹的组件都可以使用路由
BrowserRouter HashRouter
这两个组件是路由配置项的父级所有关于路由的配置项都必须在这2个组件下面
BrowserRouter as Router
HashRouter as Router 可以修改它的名称
Route：路由的配置项
当路径匹配成功以后渲染对应的组件
属性：
path：需要匹配的路径
component：需要渲染的对应组件名称
render:需要渲染的对应组件名称
component与render的区别？
render：值是一个函数 函数会返回一个组件/标签
渲染组件的时候可以进行组件传参
component：值是一个组件名称
直接通过this.props就可以拿到history、loaction match三个值
如下图所示：
路由跳转的方式：
Link：
属性
to：跳转到那个路径
activeclassName：更改默认选中的类名的名称
activeStyle：添加选中后的行间样式
如图所示：
NavLink：
Link与NavLink的区别：
Link不会添加类名而NavLink会自动添加一个类名
NavLink被选中状态
switch
渲染组件的时候只会渲染一个组件
一般会配合exact进行使用
exact这个属性可以用在route NaveLink Link身上
作用：完全匹配路径
如图所示：
注意：exact只能放在最前面，因为switch是从上往下匹配的，如果匹配成功就不会匹配了
Redirect：
作用：重定向 一般放在路由的配置项的最后面
如图所示：
路由传值：
1、动态路由传值
在父组件Home中：
在app.js中
在子组件中homedetail中
总结：
在定义路由路径的时候通过/：来定义传递参数的属性
接受：在接受的时候通过this.props.match.params进行接受
2、query传值
在父组件Home中
在子组件中
首先引入url模块
总结：在路由跳转的时候通过？做数据的拼接
接受 通过引入node url模块 做数据的解析
url.parse(this.props.location.search,true).query
3、属性传值（建议最好不要使用这种方法）因为只要一刷新就找不到数据了，而且找错误可以找一天，所以劝大家不要使用这种方法
解决方法：保存在session.location
在父组件中
在子组件中
4、编程式导航：
this.props.history.goback()
this.props.history.goForward()
this.props.history.go()
this.props.history.push()
this.props.history.replace()
如图所示：这里就不给大家一一列举了
编程式导航传参：
总结一波：history：是用来做编程式导航 、loaction：是用来做query传值、match：是用来做动态路由。
如有错误，希望大牛们多多指点！！！
转载于:https://www.cnblogs.com/ray123/p/10912276.html
相关资源：React 路由懒加载的几种实现方案