react-router: core library is react router
react-router-dom: routing solution is a web page, depending on the react-router
react-router-native: a mobile terminal to solve the react-native routing solutions, depending on the react-react
The following describes the use of the react-router-dom
react-router version here is 5.x
There are very different version of the react-router5.x use and react-router3.x
A routing module installation
npm i –S react-router-dom
2 routing definition
App.jsx
This defines four pages
<Router> define a routing instance, corresponds to a routing container
<Switch> tag allows routing only match a single <Route>, does not match with the plurality of routing comprises
5.x route having the route and comprising a completely different 3.x
exact route attribute lets strictly match, only the path will be exactly the same match is successful, the default value true, can be omitted
eq：
Matching the page root '/', will be matched routing order from top to bottom to match, if there is no <Swith> tag, will be successful match '/', '/ about', '/ inbox', '/ coder 'all <Route> tag, thereby showing its associated components.
After addition <Swith> tag, can only match a single route <Route> tag, so here only match the path = '/' is <Route> tag
However, if the match '/ about' in the Web page, will be matched to the time or path = '/' routes, it is necessary to path = '/' is <Route> tag add attributes allowed strictly exact matching, only the complete path It will be equal to a successful match on '/', the exact properties after the addition will not match the routing path = '/' route, but matched to the path = 'about' route
3. routed to render page
index.js
The following detailed description of the related components
Directory Structure:
Dashboard.jsx web root component
这里有个公共组件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 and the sub-mount the routing object instance children properties equivalent to the properties covered props.children.
From here you can see the role of <Route> tag merely acts as an intermediate component, eventually need to render
Examples of function attributes to a component to render the assembly will show, associated, by hanging on the props parameter <Route> tag
For example: path attribute <Route> will eventually form on the acquired this.props.match.path component instance react in
Inbox.jsx
Coder.jsx
