reactjs - 登录 react 路由器后如何重定向到上一页？

Question

我希望重定向到用户完成登录后最后访问的页面，为此我正在使用 react-router。我该怎么做？

Answer 1

您可以使用查询字符串来完成此操作。

添加依赖query-string到你的 React 应用。

每当用户尝试访问 protected 路径时，如果用户尚未登录，您必须重定向到登录屏幕。为此，您需要执行类似的操作。

history.push('/login');

但我们可以像下面这样将 previous 作为查询传递。我们可以使用 react-router

中的 useLocation 获取之前的路径

const prevLocation = useLocation();
history.push(`/login?redirectTo=${prevLocation}`);

现在登录成功后，我们可以获取到之前路径中传递过来的查询字符串。如果先前的路径为 null，我们可以设置一个默认路径。

const handleSuccessLogin = () => {
      const location = useLocation();
      const { redirectTo } = queryString.parse(location.search);
      history.push(redirectTo == null ? "/apps" : redirectTo);
 };

这是 IMO 最好的解决方案。