[筆記] 安裝 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>
      }
    ]
  }
];

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>

}

]

}

];

參考資料

1. Picking a Router
2. [Bug]: Redirecting synchronously/without flicker
3. Redirects in React Router v6
4. React Router v6.4.5, redirect on page load
5. https://stackoverflow.com/questions/72660003/redirection-in-react-router-dom-v6

按讚加入粉絲團

內容

參考資料

延伸閱讀