reactjs - 使用 React-Router v6 进行身份验证后，如何将用户重定向回最初请求的页面？

Question

我有一种情况，如果用户未通过身份验证，他们会被重定向到登录页面。
用户登录后，他们会被发送回主页。
这是 React 的一个非常典型的情况，但我想知道如何在用户进行身份验证后将他们重定向回某个页面。
假设用户尝试访问 /app/topics ，这将是一条私有(private)路线。他们会被重定向到 / ，他们必须在哪里进行身份验证。之后，他们被重定向到 /app/about一旦他们认证。
如何确保用户被重定向回 /app/topics反而？
About组件看起来像，

const About = ({ user }) => {
  const navigate = useNavigate();

  React.useEffect(() => {
    if (!user) navigate("/");
  }, [user]);
  return (
    <div>
      <h2>About</h2>
    </div>
  );
};

export default About;

和Home (或“登录页面”)看起来像这样，

const Home = ({ user, setUser }) => {
  const navigate = useNavigate();

  React.useEffect(() => {
    if (user) navigate("/app/about");
  }, [user]);

  return (
    <div>
      <h2>Login</h2>
      <input />
      <button onClick={() => setUser(1)}>login</button>
    </div>
  );
};

export default Home;

我知道这条线，

if (user) navigate("/app/about");

这就是用户被重定向到 About 的原因验证后，但我想知道如何更改此设置，以便将用户重定向回 Topics .

我尝试了不同方法的组合。我尝试过的最有希望的事情是将请求的 uri 保存到我的 Redux 状态中。但是，这会导致我现有的代码出现问题。
我也试过保存state与 Navigate或 useNavigate .
如果我没记错的话，React-Router v5 有一个 redirect prop 或类似的东西，将用户重定向回某个页面。

Answer 1

我只是在 url 中回退到好的旧查询参数，只是在重定向到登录页面后，输入查询参数，from或 url 中的某些内容，并在成功登录后进行重定向，这具有巨大的优势，即如果您将他带到不同的页面或由于某种原因他必须重新加载页面，他会保留此信息。