EP06 | React 18 全家桶複習 - React-Router (路由驗證及攔截)

發表於 更新於 分類於 ， ，

路由驗證及攔截的快速方法

在需要登入的頁面中，需要先判斷是否已經被授權，有授權才可以進入指定頁面。

React-Router 提供了一個更簡便的方法，再進入該該路由前，先透過 loader 方法來進行驗證，而後透過 errorElement 來指定驗證不成功會進入哪個頁面。

https://reactrouter.com/en/main/route/error-element

測試用範例(使用 localStorage 做驗證測試)
假設進入 /home/message 要經過驗證，驗證不成功則返回 /login 頁面

注意事項:

  1. React-Router v6 明確表示: 新的 Data APIs 僅能透過某些新的路由來使用。其中 createBrowserRouter 是被推薦用在 Web 應用上的( createBrowserRouter 是取代 useRoutes 的)。

  1. 使用 createBrowserRouter 時，必須搭配 <RouterProvider router={引入的路由表} />

  2. 在 index.js 中，無須用 <RouterProvider router={引入的路由表}> 包裹住 <App/>，而是透過路由設置路徑設置導出 App 頁面。

  3. 在路由中，透過 loader 屬性解決路由驗證及攔截有 2 種方法：

  • 返回 new Error("訊息內容")，並透過另一個屬性 errorElement 指定如果 loader 返回錯誤要前往的頁面。
  • 返回 redirect("頁面路徑")，直接可以跳轉到指定頁面(官方: 建議在 loader、action 等 API 中使用 redirect 而非 useNavigate)。