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

Question

我创建了一个非常简单的登录页面，但我如何实现登录后返回所选页面的方法？ 我认为可能与Navigate中传递的from属性有关，但如何获取用户选择的页面和 go 到？

<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 />在route state中传递当前被访问的route location Login组件只是访问这个传递的state并发出重定向返回。

例子：

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) {
      ...
    }
  };

  ...
};