刚发现掘金的编辑器支持 markdown 语法，转战掘金了，B站尽力跟上吧。

搭建路由

1. react 搭路由有三种写法：传统组件法、useRoutes 法、data Router 法

2. 官方推荐的写法是 data Router

3. 这里用 data Router

4. route 的 handle 类似 vue-router 中的 meta

5. handle 属性仅在 data Router 下有效

6. 获取 handle 的 useMatches 只能在 data Router 下调用

路由鉴权 & 标题随动

1. 所有路由变化都会触发 AuthRoute 的更新

2. 通过操纵 AuthRoute 返回的 JSX 实现路由鉴权

3. AuthRoute 里的 useEffect 模仿 vue-router 中的 afterEach 实现 标题随动

路由懒加载

1. vue-router 里的 component 可以直接写成一个回调以实现懒加载

2. 但是 react-router 没有，需要我们自己写 hook

用上 hook 后，route 的写法

最后

1. 因为涉及到登录模块，东西太多了，全塞进来就没法看了，简要说一下吧

2. 首先需要用 redux 生成一个全局 store 保存登录状态

3. 因为 token 有效期的关系，在 token 失效时应该有自动注销功能

4. 用 react-router-dom 搭建基本路由：首页、登录、404、白名单

5. 写 AuthRoute 组件鉴权，并随路由修改网页 title

6. App 组件挂载时订阅 store 变化，store 中的登录状态失效时重定向到登录面

7. 成品项目：https://gitee.com/Swz082421/vite-react