javascript React Router Dom v6中的重定向

2guxujil 于 2023-04-10 发布在 Java

关注(0)|答案(2)|浏览(221)

在v6中重定向的正确过程是什么？我之前在v5中使用了以下代码，它工作得很好：

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

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

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

JavaScript

来源：https://stackoverflow.com/questions/72660003/redirection-in-react-router-dom-v6

2条答案

按热度按时间

8ehkhllq1#

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

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

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

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

赞(0）回复(0）举报 2023-04-10

ego6inou2#

使用React Router Dom v6，您可以使用Navigate和useNavigate进行重定向，而不是v5中使用的Redirect和useHistory。如下所示。请参阅评论：

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

export default function Foo() {
  const navigate = useNavigate();
  // Use navigate returned by useNavigate  when you are outside of JSX
  navigate("/");
  // Use Navigate the imported component when you are inside of JSX
  return <Route path="/login">{user ? <Navigate to="/" /> : <LoginStandard />}</Route>;
}

赞(0）回复(0）举报 2023-04-10

我来回答

javascript React Router Dom v6中的重定向

2条答案

相关问题

热门标签

最新问答