如何在 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>