[筆記] 安裝 react-router-dom v6.4 以後版本出現的路由切換閃爍問題 @地瓜大的飛翔旅程

章節連結

內容
參考資料

React Router DOM 在 v6 版本後，相較於 v5 有了不小改動。近期在用傳統的 createBrowerRouter 的物件陣列寫法時，遇上了切換路由時畫面總是會閃爍一下的情況。這篇筆記下可能緣由和解方。

內容

這似乎是一個有歷史年代的問題，在 2021 年就有開發者提出了：[Bug]: Redirecting synchronously/without flicker 緣由是在使用 <Navigate> 導向時會觸發 useEffect 函式作用。

解法：需使用 v6.4.0 以後的版本，可選擇採用有新版的 new Data API 的寫法如下：

let router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index loader={() => redirect("/one")} />
      <Route path="one" element={<h1>One</h1>} />
      <Route path="two" element={<h1>Two</h1>} />
      <Route path="three" element={<h1>Three</h1>} />
    </Route>
  )
);

let router = createBrowserRouter(

createRoutesFromElements(

<Route index loader={() => redirect("/one")} />

<Route path="three" element={<h1>Three</h1>} />

</Route>

)

);

或是用傳統的寫法也可

const routes = [
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        loader: () => redirect("/one")
      },
      {
        path: "one",
        element: <h1>One</h1>
      },
      {
        path: "two",
        element: <h1>Two</h1>
      },
      {
        path: "three",
        element: <h1>Three</h1>
      }
    ]
  }
];