路由
目前前端流行的三大框架, 都有自己的路由实现:
- Angular 的 ngRouter
- React 的 ReactRouter
- Vue 的 vue-router
React Router 在最近两年版本更新的较快，并且在最新的 React Router6.x 版本中发生了较大的变化
bash
npm install react-router-domreact-router 最主要的 API 是给我们提供的一些组件：
- BrowserRouter 或 HashRouter
- Router 中包含了对路径改变的监听，并且会将相应的路径传递给子组件
- BrowserRouter 使用 history 模式
- HashRouter 使用 hash 模式
基本使用
Routes：包裹所有的 Route，在其中匹配一个路由
- Router5.x 使用的是 Switch 组件
Route：Route 用于路径的匹配
- path 属性：用于设置匹配到的路径
- element 属性：设置匹配到路径后，渲染的组件
- Router5.x 使用的是 component 属性
- exact：精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件
- Router6.x 不再支持该属性
Link 和 NavLink
- 通常路径的跳转是使用 Link 组件，最终会被渲染成 a 元素
- NavLink 是在 Link 基础之上增加了一些样式属性
- to 属性：Link 中最重要的属性，用于设置跳转到的路径
需求：路径选中时，对应的 a 元素变为红色。这个时候，我们要使用 NavLink 组件来替代 Link 组件：
- style：传入函数，函数接受一个对象，包含 isActive 属性
- className：传入函数，函数接受一个对象，包含 isActive 属性
Navigate 用于路由的重定向，当这个组件出现时，就会执行跳转到对应的 to 路径中
如果用户随意输入一个地址，该地址无法匹配，那么在路由匹配的位置将什么内容都不显示
- 很多时候，我们希望在这种情况下，让用户看到一个 Not Found 的页面
路由的嵌套
<Outlet> 组件用于在父路由元素中作为子路由的占位元素
路由配置
手动路由的跳转
在Router6.x版本之后，代码类的API都迁移到了hooks的写法：
- 如果我们希望进行代码跳转，需要通过 useNavigate 的 Hook 获取到 navigate 对象进行操作
- 那么如果是一个函数式组件，我们可以直接调用，但是如果是一个类组件呢？
路由参数传递
传递参数有二种方式：
- 动态路由的方式
- search 传递参数
路由的配置文件
- 目前我们所有的路由定义都是直接使用Route组件，并且添加属性来完成的
- ** 但是这样的方式会让路由变得非常混乱，我们希望将所有的路由配置放到一个地方进行集中管理
如果我们对某些组件进行了异步加载（懒加载），那么需要使用 Suspense 进行包裹：
