react-router：是react router的核心库
react-router-dom：是网页路由的解决方案，依赖于react-router
react-router-native：是react-native解决移动端路由的解决方案，依赖于react-react
下面讲述的是react-router-dom的使用
这里用的react-router版本是5.x
react-router5.x版本和react-router3.x使用上有很大不同
1安装路由模块
npm i –S react-router-dom
2路由的定义
App.jsx
这里定义了4个页面
<Router>定义一个路由实例，相当于一个路由容器
<Switch>标签让路由只能匹配单个<Route>，不具包含性的匹配多个路由
5.x的路由具有包含性和3.x的路由完全不同
exact属性让route进行严格匹配，只有路径完全一致才会匹配成功，默认值true，可以省略不写
eq：
在网页中匹配根路径’/’,路由匹配会按从上到下的顺序进行匹配，如果没有<Swith>标签，就会成功匹配’/’,’/about’,’/inbox’,’/coder’所有的<Route>标签，从而展示其相关的组件。
添加<Swith>标签后，路由只能匹配单个<Route>标签，因此这里只会匹配到path=’/’的<Route>标签
但如果在网页中匹配’/about’,这时还是会匹配到path=’/’的路由，因此需要给path=’/’的<Route>标签添加exact属性让其进行严格匹配，只有路径完全等于’/’时才会成功匹配，添加exact属性后路由就不会匹配到path=’/‘的路由上，而是匹配到path=’about’的路由
3.将路由渲染到页面
index.js
下面叙述相关的详细的组件
目录结构：
Dashboard.jsx 网页根组件
这里有个公共组件Header
Header.jsx
<Link>标签用来进行路由跳转，默认会被渲染成a标签
About.jsx
Inbox.jsx
这里面嵌套了两个子路由，对应的组件分别是MessageLinkComponent和Message
其中一个是动态路由，以id值作为动态路径
获取父级路由的路径path：this.props.match.path，这里获取到的path是 ‘/inbox’
与this.props.match.url比较：
this.props.match.path获取的是纯路径，即定义好的路径 ‘/index/:id’
this.props.match.url获取的是资源的路径地址 ‘/index/123’
子路由组件：MessageLinkComponent.jsx
实现子路由的跳转，并把id值当成动态路径传出
子路由组件：Message.jsx
子路由跳转的内容显示
id值的获取：this.props.match.params.id
Coder.jsx
定义了一个子路由，其对应的组件是CoderContent
并且定义了子路由跳转的Link，实现子路由跳转，将相关数据以键值对存放于路径中并传递出去
CoderContent.jsx
通过get传值传递来的键值对用node的url模块进行解析，解析出一个以json对象保存的query对象，并将其展示在页面上
url.parse(this.props.location.search,true).query
路由模块的抽离
将路由的定义抽离成一个配置文件routesConfig.js
routesConfig.js
相关页面也需要改写
App.jsx
这里用三元表达式代替了if-else语句的嵌套
注意：子路由的嵌套要将component属性改写成一个render函数，这样才能将children子路由对象传递给props参数
render函数是一个带props参数的箭头函数，结果返回一个react组件实例对象（jsx对象）
并把children子路由挂载在实例对象的children属性上，相当于覆盖了props.children属性。
从这里可以看出<Route>标签的作用仅仅只是充当了一个中间组件，最后还是需要通过render
函数来渲染相关的即将展示的组件，并通过props参数把挂在<Route>标签上的属性传给组件实例
例如：<Route>上的path属性最终会以this.props.match.path的形式在react组件实例中获取到
Inbox.jsx
Coder.jsx