在REACT-ROUTER-DOM v6中重定向
登录后我需要导航回原始请求的URL。
例如,用户输入www.example.com/settings
,因为用户未经过身份验证,它将导航到登录页面www.example.com/login
。
一旦通过身份验证,它应该会自动导航回www.example.com/settings
。
我最初使用react-router-dom
v5的方法非常简单:
const PrivateRoute = ({ isLoggedIn, component: Component, ...rest }) => {
return (
<Route
{...rest}
render={(props) =>
isLoggedIn? (
<Component {...props} />
) : (
<Redirect
to={{ pathname: `/login/${props.location.search}`, state: { from: props.location } }}
/>
)
}
/>
);
};
<PrivateRoute exact isLoggedIn={isLoggedIn} path="/settings" component={Settings} />
有人能告诉我在V6中如何做到这一点吗?提前感谢
解决方案
在react-router-dom
v6中呈现路径和处理重定向与v5有很大不同。定制布线组件消失了,取而代之的是包装组件模式。
v5-自定义路由
获取道具并有条件地呈现具有经过的路线道具的Route
组件或具有当前location
的路线状态的Redirect
组件。
const CustomRoute = ({ isLoggedIn, ...props }) => {
const location = useLocation();
return isLoggedIn? (
<Route {...props} />
) : (
<Redirect
to={{
pathname: `/login/${location.search}`,
state: { location },
}}
/>
);
};
...
<PrivateRoute
exact
isLoggedIn={isLoggedIn}
path="/settings"
component={Settings}
/>
V6-自定义包装
获取道具并有条件地呈现嵌套的Route
组件的Outlet
组件,或呈现具有当前location
的路由状态的Navigate
组件。
const CustomWrapper = ({ isLoggedIn, ...props }) => {
const location = useLocation();
return isLoggedIn? (
<Outlet />
) : (
<Navigate
to={`/login/${location.search}`}
replace
state={{ location }}
/>
)
};
...
<Route path="settings" element={<CustomWrapper isLoggedIn={isLoggedIn} />} >
<Route path="settings" element={<Settings />} />
</Route>
相关文章