[英]Redirection In React-Router-Dom v6
v6 中重定向的正确过程是什么? 我以前在 v5 中使用以下代码,效果很好:
<Route path="/login">
{user ? <Redirect to="/" /> : <LoginStandard />}
</Route>
但是,我想在这个版本中使用相同的逻辑。 当我的用户登录后,我想重新定向。
<Route path="/login">
<Route index element={<LoginStandard />} />
</Route>
使用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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.