javascript - React Router Dom v6 中的重定向

Question

v6 中重定向的正确过程是什么？我之前在 v5 中使用了以下代码，它运行良好:

<Route path="/login">
  {user ? <Redirect to="/" /> : <LoginStandard />}
</Route>

但是，我想在此版本中使用相同的逻辑。当我的用户登录后，我想重定向。

<Route path="/login">
  <Route index element={<LoginStandard />} />
</Route>

Answer 1

使用Navigate 组件进行重定向。仍然需要应用条件渲染逻辑，并在 Route 组件的 element 属性上渲染组件。

例子:

<Route
  path="/login"
  element={user ? <Navigate to="/" replace /> : <LoginStandard />}
/>

通常认为更好的做法是将其抽象为自定义路由保护组件，该组件有条件地为嵌套路由或 Navigate 组件呈现 Outlet。

例子:

import { Navigate, Outlet } from 'react-router-dom';

const AnonymousRoute = ({ user }) => user
  ? <Navigate to="/" replace />
  : <Outlet />;

...

<Route element={<AnonymousRoute user={user} />}>
  <Route path="/login" element={<LoginStandard />} />
  ... other anonymous routes ...
</Route>
... other routes