路由最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。
路由器Router是React的一个组件，router是一个容器，包裹的route用来匹配url和组件
spa单页面应用，路由链接不引起页面跳转，修改地址栏url，url一修改就会被浏览器的history前端路由监测到，一个路径对应一个组件，匹配成功后就显示对应的组件页面
key：路径path /home
value：组件component Home（用于展示页面）
或者函数（node，express，后端路由，函数用于处理对应路由提交数据）
前端路由的基石，bom上带的history函数，
方法一：H5推出的history的API（BrowserHistory），例如push、replace、back、forward方法，栈的执行模式，往里面存入数据，先进先出
方法二：HashHistory，使用hash值（锚点）多一个#，跳转路由路径拼接在#后面，锚点跳转不会刷新页面，但是会留下历史记录
react-router（web，native，anywhere）
react-router-dom（web）的理解route（路由），router（路由器，管理路由），react的插件库，实现spa应用
路由组件和一般组件:1.写法不同，<Demo/>,<Route path=,component=''>,2.存放位置不同，普通组件component，路由组件：pages，3.收到的props不同，普通组件传什么收到什么，路由组件会收到三个属性history，location，match
link实现组件切换,navLink导航区路由栏，类似a标签，navlink选中的导航栏有高亮效果，link标签没有，用to控制去哪个组件，to可以接收一个对象，pathname指定去哪个页面，能跳到用route注册过的路由，route注册路由，将url路径与组件做一一对应匹配
默认严格匹配，输入的路径要包含匹配的路径，顺序要一致
开启严格匹配会影响二级路由匹配，轻易不开启严格匹配
redirect：重定向，一个都匹配不上的时候，由<Redirect to=' '/>指定默认去的页面，当用户访问某界面时，该界面并不存在，此时用Redirect重定向，重新跳到一个我们自定义的组件里。
嵌套（多级）路由：先从一开始注册的路由匹配，匹配上第一个路由去对应的组件匹配下一级对应的注册路由，路由的匹配安装注册顺序来的 /home/news,一级先/home，然后home组件里面对应上/home/news,多级路由不应该开启严格匹配，会导致直接匹配不上
1.注册子路由时要写上父路由的path值，例如home里面的news，不能直接写/news，要写/home/news
2.路由的匹配安装注册路由顺序进行
向路由组件传递参数数据：
1.携带params参数（直接在路径里面写），第一步：在link标签里面to的路径后面添加/xxxid/xxxtitle，第二步：在注册路由的时候再path的后面添加/：id/：title声明接收，第三步：路由跳到的组件里面的this.props.match.params里面带了所有参数，刷新页面不会丢失
2.search参数，第一步在link标签to的路径后面添加/？id=‘xxxx’&&title=‘xxxx’，无需声明接收，正常注册路由，接收路由跳到的组件里面的this.props.location.search里面带了所有参数，需要自己将字符串正则，自己整理，以&做分割，用queryString分割（key=value&key=value urlencoded编码格式），qs.stringify将对象转成urlcoded编码，qs.parse将urlcoded编码转成{key：value，key：value}格式，刷新页面不会丢失
3.state参数，不会再url地址栏里面出现，给to传递一个对象{pathname：要去的地址，state:{参数}}，无需声明，直接接收，组件接收时在this.props.location.state中是所有参数，刷新页面不会丢失，因为使用的时browserRoute，操作的时history对象，location是history的一个对象，有历史记录，如果清掉历史记录，state值就没了
params参数用得较多
push和replace的区别：push会留下历史记录，点击一个历史栈里面压进一个地址，当前看到的都是栈顶的，开启replace模式，替换栈顶的元素，不留下痕迹，link标签里面带有一个replace属性，为true的时候开启replace模式
编程式路由导航:主要是使用history身上的API，使用this.props.history.push/replace(''地址)，传参跟to后面跟的一样，注册路由也是，goforward（前进），goback（回退），go(n)正数前进n步，负数后退n步
withRouter的使用：一般组件需要使用路由组件的API时需要用到，在react-route-dom上的一个方法，接收一个一般组件，返回一个带有路由组件api的组件（高阶组件）
BrowserRouter与HashRouter的区别
1.底层原理不一样：
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。#后面的值只是前端的东西，不会向服务器发送相关强求
2.path表现形式不一样
BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
HashRouter的路径包含#,例如：localhost:3000/#/demo/test
3.刷新后对路由state参数的影响
(1).BrowserRouter没有任何影响，因为state保存在history对象中。
(2).HashRouter刷新后会导致路由state参数的丢失！！！，因为没有用上history Api，没有历史记录
4.备注：HashRouter可以用于解决一些路径错误相关的问题。