如何在 react-router-dom v6 上處理 404？

Question

我該如何修理我的路由器？ 我正在使用 redux 來處理注銷，但是當注銷時，它會引導我到 404 頁面然后到登錄頁面。 我試圖exact定位路線並將 404 路線放在路線列表的最后。 我的網站有不同的用戶角色，所以我認為這個錯誤與此有關。

<Routes>
  <Route path={ROUTES.Error} element={<NotFound />} />

  <Route path={ROUTES.home} element={<Private />}>
    {pages
      .filter((page) =>
        page.hasAccess.some((role) =>
          _.isEqual(role, user?.info?.RoleCode),
        ),
      )
      .map(({ id, path, element: Element }) => (
        <>
          <Route
            key={id}
            path={ROUTES.home}
            element={<Navigate replace to="dashboard" />}
          />,
          <Route key={id} path={path} element={<Element />} />
        </>
      ))}
  </Route>
  <Route
    path=""
    element={<Public />}
    children={<Route path={ROUTES.login} element={<Login />} />}
  />
</Routes>

在 saga 下 退出

function* logout() {
  yield put(userSlice.actions.logoutFulfilled(null));
  socket.disconnect();
  yield new Promise(() => {
    notification.success({
      message: 'Success',
      description: 'Logout Success',
    });
  });
}

Answer 1

這里的問題似乎是代碼根據當前user對象的角色有條件地呈現路由。 受保護的路由在任何用戶檢查發生之前被卸載，因此 UI 會暫時呈現“404”路由，然后進行身份驗證檢查並重定向用戶登錄。

您通常應該無條件地渲染路由，以便它們始終掛載和匹配，並使用布局路由來渲染路由保護器。

目前還不清楚Private路由具體做什么，所以我會建議您創建一個RoleWrapper組件來回答，該組件根據當前user.info.RoleCode屬性檢查路由的訪問角色。 如果當前用戶具有適當的角色，則呈現children道具，否則呈現重定向到安全、不受保護的路由。

const RoleWrapper = ({ children, roles }) => {
  const { user } = /* however the user object is accessed */

  // Handles initial mount if user object is fetched
  if (user === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  const canAccess = roles.some(
    (role) => _.isEqual(role, user?.info?.RoleCode),
  );

  return canAccess
    ? children
    : <Navigate to="/dashboard" replace />; // or any safe route
};

<Routes>
  <Route path={ROUTES.Error} element={<NotFound />} />
  <Route path={ROUTES.home} element={<Private />}>
    {pages.map(({ element: Element, hasAccess, id, path }) => (
      <Route
        key={id}
        path={path}
        element={(
          <RoleWrapper roles={hasAccess}>
            <Element />
          </RoleWrapper>
        )}
      />
    ))}
  </Route>
  <Route element={<Public />}>
    <Route path={ROUTES.login} element={<Login />} />
  </Route>
</Routes>

Answer 2

非常簡單，你只需要使用。

<Routes>
   <Route path="*" element={<NotFound />} />
</Routes>