如何检查以前的路由不是空的反应路由器v6?

Question

我使用navigate(-1, { replace: true });进行登录重定向。我想检查前一条路由是否存在，否则如果前一条路由不存在，则navigate(-1)工作不正常。

我怎么检查呢?

Answer 1

最好使用

navigate("Your login pathName", { replace: true });

例如

navigate('/login',{ replace: true })

Answer 2

如果我正确理解您的问题，您正在询问如何将用户重定向到他们在身份验证之前试图访问的路由。这并不是真的试图发出一个反向导航，而是，知道你来自某处你需要回到

位置。这个问题的解决方案通常是从"路径，或当重定向到时的引用器，以便它可以重定向到原始路径。

下面的示例显示了您可能想要实现的整个UI/UX流程。它从一个专门的路由组件开始，该组件获取当前位置，并将其与重定向一起传递到登录路由。

import { Navigate, Outlet } from 'react-router-dom';
const PrivateRoutes = () => {
const location = useLocation(); // <-- gets current location
const { isAuthenticated } = /* some auth state accessor */;
return isAuthenticated 
? <Outlet />
: (
<Navigate
to="/login"
replace
state={{ from: location }} // <-- pass location in state
/>
);
}

和一些受保护/未受保护的路由。

<BrowserRouter>
<Routes>
<Route path="/" element={<PrivateRoutes />} >
<Route path="/protected" element={<Protected />} />
</Route>
<Route path="/login" element={<Login />} />
<Route path="*" element={<PageNotFound />} />
</Routes>
</BrowserRouter>

Login组件然后处理身份验证流，在成功登录后，然后尝试重定向回此目标路径。如果没有引用值，您还可以在这里提供一个回退路径，通常是"/"。

export default function Login() {
const location = useLocation();
const navigate = useNavigate();
const { login } = /* some auth state accessor */;
... local state
const loginHandler = async () => {
const isAuthenticated = await login(....);
if (isAuthenticated) {
// destructure referrer path or use fallback
const { from } = location.state || { from: { pathname: "/" } };
// redirect back
navigate(from, { replace: true });
}
};
return (
<div
style={{ height: "100vh" }}
className="d-flex justify-content-center align-items-center"
>
<button type="button" onClick={loginHandler} className="btn btn-primary">
Login
</button>
</div>
);
}