React -登录后路由返回所需页面

Question

我创建了一个非常简单的登录页面，但是我如何实现在登录后返回所选页面的方法?我想可能是与from属性有关的东西在Navigate中传递，但是我怎么能得到用户选择并去的页面?

<Routes>
<Route path='*' element={<NotFound />} />
<Route exact path='/Login' element={<Login />} />
<Route
path='/Apontar/:data_sel'
element={<RequireAuth><Apontar /></RequireAuth>}
/>
...

function RequireAuth({ children }) {
const { status, setStatus } = useContext(AuthContext);
let location = useLocation();
if (status == null) {
return <Navigate to="/Login" state={{ from: location }} replace />;
}
return children;
}

Answer 1

你可以使用useNavigate钩子来实现这个动作

import {useNavigate} from "react-router-dom";
const navigate=useNavigate();
if(status==null){
navigate('/login');
}

Answer 2

<Navigate to="/Login" state={{ from: location }} replace />通过处于路由状态的location对象访问当前路由。Login组件只是访问这个传递的状态，并发出一个重定向返回。

的例子:

import { useLocation, useNavigate } from 'react-router-dom';
...
const Login = () => {
const { state } = useLocation();
const navigate = useNavigate();
...
const loginHandler = async () => {
try {
await /* authentication service /*
const { from } = state || {};
navigate(
from.pathname || "/", // <-- target page or home
{ replace: true }     // <-- redirect
);
} catch(error) {
...
}
};
...
};