React Router 基本使用与常见问题解决方案

引入路由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文件中引入路由组件。

路由组件和一般组件的区别

1. 写法不同
   一般组件：<Demo/>
   路由组件：<Route path="/demo" component={Demo}/>
2. 存放位置不同
   一般组件：components
   路由组件：pages
3. 接收到的props不同
   一般组件：写组件标签时传递什么就收到什么
   路由组件：接收到三个固定属性，history，location，match。

NavLink和Link的区别

NavLink可以实现路由链接的高亮，通过activeClassName指定样式名，也可以通过封装自定义NavLink，封装的组件放在components中

Switch的使用

通常情况下我们不希望一个path对应多个component，这样会导致多个component同时渲染到页面上，所以会引入react-router-dom中的Switch，包裹在Route组外，以得到一一对应的路由，提高匹配效率

解决多级路径刷新页面样式丢失的问题

1. 在public/index.html中，引入样式式不写./而是/
2. 在public/index.html中，引入样式式不写./而是 %PUBLIC_URL%
3. 使用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的区别

1. 底层原理不同
   BrowserRouter用的是H5的history中的API，兼容性相对要差一些
   HashRouter用的是URL的哈希值
2. URL表现形式不一样
   BrowserRouter的路径中没有#，HashRouter中有
3. 刷新后对state参数的影响
   BR无影响
   HR刷新会导致state参数的丢失