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

使用 React Router Dom v6 ，您可以使用Navigate而不是Redirect進行重定向。 像這樣：

import {Navigate} from "react-router-dom";

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

Answer 2

使用Navigate組件進行重定向。 仍然需要應用條件渲染邏輯，並在Route組件的element prop 上渲染組件。

例子：

<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