2023：React 路由鑒權(quán)、懶加載、標(biāo)題隨動(dòng)
剛發(fā)現(xiàn)掘金的編輯器支持 markdown 語法，轉(zhuǎn)戰(zhàn)掘金了，B站盡力跟上吧。
搭建路由
1. react?搭路由有三種寫法：傳統(tǒng)組件法、useRoutes 法、data Router 法
2. 官方推薦的寫法是 data Router
3. 這里用 data Router
4. route 的 handle 類似 vue-router 中的 meta
5. handle 屬性僅在 data Router 下有效
6. 獲取 handle 的 useMatches 只能在 data Router 下調(diào)用
路由鑒權(quán) & 標(biāo)題隨動(dòng)
1. 所有路由變化都會(huì)觸發(fā) AuthRoute 的更新
2.?通過操縱?AuthRoute 返回的 JSX?實(shí)現(xiàn)路由鑒權(quán)
3.?AuthRoute 里的 useEffect 模仿 vue-router 中的 afterEach 實(shí)現(xiàn) 標(biāo)題隨動(dòng)
路由懶加載
1. vue-router 里的 component 可以直接寫成一個(gè)回調(diào)以實(shí)現(xiàn)懶加載
2. 但是 react-router 沒有，需要我們自己寫 hook
用上 hook 后，route 的寫法
最后
因?yàn)樯婕暗降卿浤K，東西太多了，全塞進(jìn)來就沒法看了，簡(jiǎn)要說一下吧
首先需要用 redux 生成一個(gè)全局 store 保存登錄狀態(tài)
因?yàn)?token 有效期的關(guān)系，在 token 失效時(shí)應(yīng)該有自動(dòng)注銷功能
用 react-router-dom 搭建基本路由：首頁(yè)、登錄、404、白名單
寫 AuthRoute 組件鑒權(quán)，并隨路由修改網(wǎng)頁(yè) title
App 組件掛載時(shí)訂閱 store 變化，store 中的登錄狀態(tài)失效時(shí)重定向到登錄面
成品項(xiàng)目：https://gitee.com/Swz082421/vite-react
