共计 1695 个字符，预计需要花费 5 分钟才能阅读完成。
引入路由 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参数的失落