1. 相关理解
1.1 SPA的理解
（1）单页Web应用（single page web application, SPA）
（2）整个应用只有一个完整的页面
（3）点击页面中的链接不会刷新页面，只会做页面的局部更新
（4）数据都需要通过ajax请求获取，并在前端异步展现
1.2 路由的理解
1.2.1 什么是路由
（1）一个路由就是一个映射关系（key ： value）
（2）key为路径，value可能是function或component
1.2.2 路由分类
-
后端路由：
- 理解：vlaue是function，用来处理客户端提交的请求。
- 注册路由：
router.get(path, function(req, res)) - 工作过程：当node接收到一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据
-
前端路由：
- 浏览器端路由，value是component，用于展示页面的内容。
- 注册路由：
<Router paht="/test" component={Test}> - 工作过程：当浏览器的path变为/test时，当前路由组件就会变为Test组件
1.2.3 前端路由的基石 – bom history
路由的实现依赖bom对象的history属性
1.3 react-router-dom 的理解
（1）react的一个插件库
（2）专门用来实现一个SPA的应用
（3）鲫鱼react的项目基本都会用此库
2. react-router-dom相关API
官网：https://react-router.docschina.org/
2.1 内置组件
- <BrowserRouter>
- <HashRouter>
- <Router>
- <Redirect>
- <Link>
- <NavLink>
- <Switch>
2.2 其他
- history对象
- mactch对象
- withRouter对象
React Router 6 – 最新版
React Router以三个不同的包发布在npm上，他们分别为：
（1）react-router：路由核心库，提供了很多：组件、钩子
（2）react-router-dom：包含react-router所有内容，并添加一些专门用于DOM的组件，例如\<BrowserRouter>等
（3）react-router-native：包括react-router所有内容，并添加一些专门用于ReactNative的API，例如<NativeRouter>等
与React Router 5.x版本相比，改变了什么？
（1）内置组件的变化：移除<Switch/>，新增<Routes/>等
（2）语法的变化：component={about}变为element={<about/>}
（3）新增多个hook：useParams、useNavigate、useMatch等
（4）官方明确推荐函数式组件了！！
