引入路由Router
想起以前上网的时候，网速慢，每次点击一个链接跳转须要期待页面刷新一段时间，当初曾经很少见这种了。前端引入路由之后，不须要页面刷新也能通过导航或者链接来刷新页面内容。
咱们晓得React所有皆组件，个别的那些数据无需从新渲染的组件们，都被叫做个别组件，个别放在components文件夹，而路由组件有所不同，个别寄存在另外的pages文件夹里。
对于一个须要路由的界面，咱们能够把界面分成导航区和展示区，当咱们点击导航区的不同标签时，展示区就会展现不同的内容。
路由的根本应用
先装置路由，老样子，有的node的环境下，在终端中输出yarn add react-router-dom, 即可装置router，没有yarn能够用npm。
在HTML中，要实现页面跳转，通常是须要用到a标签来实现页面跳转，或者通过js来勾销默认跳转操作而后操作DOM来实现路由性能。有了react-router之后，咱们能够在导航区用Link或者NavLink标签来代替a标签，在展示区写Route标签进行门路的调配，并在最内部包裹一对Router标签（BrowserRouter/ HashRouter)，这样就设置好了路由，代码如下。
//导航区<Link to="/xxx">Demo</Link>//展示区<Route path="/xxx" component={Demo}/>其中to和path须要统一能力进行路由跳转，路径名能够本人设置。component中是曾经裸露的路由组件，须要在以后的jsx文件中引入路由组件。
路由组件和个别组件的区别
- 写法不同
个别组件：<Demo/>
路由组件：<Route path="/demo" component={Demo}/> - 寄存地位不同
个别组件：components
路由组件：pages - 接管到的props不同
个别组件：写组件标签时传递什么就收到什么
路由组件：接管到三个固定属性，history，location，match。
NavLink和Link的区别
NavLink能够实现路由链接的高亮，通过activeClassName指定款式名，也能够通过封装自定义NavLink，封装的组件放在components中
Switch的应用
通常状况下咱们不心愿一个path对应多个component，这样会导致多个component同时渲染到页面上，所以会引入react-router-dom中的Switch，包裹在Route组外，以失去一一对应的路由，进步匹配效率
解决多级门路刷新页面款式失落的问题
- 在
public/index.html中，引入款式式不写./而是/ - 在
public/index.html中，引入款式式不写./而是%PUBLIC_URL% - 应用
HashRouter
前两个办法比拟罕用，而HashRouter用的比拟少
严格匹配和含糊匹配
默认应用的是含糊匹配，也就是说，只有第一级门路能匹配，即便前面的所有门路都不匹配也没关系，不会报错，展现这个匹配的组件。开启严格匹配须要给Route组件增加一个属性exact={true}。严格匹配不要轻易开启，有时候开启会导致无奈持续匹配二级路由
Redirect
默认跳转，在所有路由无奈匹配的时候，跳转的Redirect指定的路由，须要从react-router-dom中引入，编码实例如下：
<Switch> <Route path="/about" component={About}/> <Route path="/home" component={Home}/> <Redirect to="/about"/></Switch>向路由组件传递参数的三种形式
params参数search参数state参数
BrowserRouter和HashRouter的区别
- 底层原理不同
BrowserRouter用的是H5的history中的API，兼容性绝对要差一些HashRouter用的是URL的哈希值 - URL表现形式不一样
BrowserRouter的门路中没有#，HashRouter中有 - 刷新后对
state参数的影响BR无影响HR刷新会导致state参数的失落