React Router 5 路由基础

路由的原理

1. 通过 API 修改 BOM 的 history 属性
2. 监听 BOM 的 history 属性变化，重新渲染

可以使用 history 库方便的调用相关 API

React Router 使用

React Router 分为3个库，开发网页可使用 react-router-dom

1. 在 index.js 引入 BrowserRouter，并将 React 最外层组件设置为 BrowserRouter，确保全局使用同一个 Router。（也可以使用 HashRouter ）
   

2. 设置 Link 组件，类似于 a 标签，点击可切换 path 而不刷新

   1. Link 组件
      
   2. NavLink 组件，被激活时追加类名，默认追加 “active”
      

3. 注册路由，当浏览器 path 为路由对应 path 时，渲染对应组件，且组件会收到一些 props

   1. 不限制匹配个数，从上往下匹配
      
   2. 用 Switch 包裹，匹配到一个后不再匹配，提升效率
      

因为 Link 和 Route 要位于同一个 Router 下才能生效，所以第一步要将 Router 放在最外层

一般组件和路由组件

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

模糊匹配和严格匹配

默认为模糊匹配，当 route 的 path 是浏览器 path 的前缀则匹配成功
加入 exact 设置为严格匹配，当 route 的 path 和浏览器的 path 完全一致才匹配成功

严格匹配不要随便开启，需要时再用，有时候开启会导致无法继续匹配二级路由

路由重定向

可在所有路由的下面放置一个 Redirect 组件，当前面的路由都匹配不上时修改 path，重定向到对应路由

嵌套路由

先注册的路由先匹配。父路由开启严格匹配会导致无法继续匹配子路由

1. 父组件先注册一级路由
   
2. 子组件再注册二级路由
   

BrowserRouter 和 HashRouter 区别