Question

我创建了受保护的路由组件，如果未通过身份验证，则将重定向到登录的'/'。那很好。我的问题是，如果用户通过身份验证，如何限制路径“ /”。

例如。我想转到'/welcome'，然后单击一些将我发送到'/welcome'的外部链接，但是由于未通过身份验证，它会将我重定向到'/'进行身份验证的地方。完成身份验证后，它应再次将我重定向到'/welcome'，即我的初始路径。

如何？我现在确实想要硬编码路径，我想将我发送到最初使用的路径。

如果我在浏览器中手动将路径更改为'/welcome'，那么如果按后退按钮会将其带回到'/'，但我不希望这样。鉴于我已通过身份验证，它应该保留在'/welcome'上。

我尝试过这样的事情：

<Route exact path="/">
    {isAuth ? <Redirect to="/welcome" /> : <Auth />}
</Route>

问题是我不想硬编码重定向到'/ welcome'，因为例如我可能来自另一条路径'/example'。

有什么建议吗？

Answer 1

尝试做这样的事情。

const PrivateRoute = ({ component: Component, isLoggedIn, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isLoggedIn ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{ pathname: '/', state: { from: props.location } }}
        />
      )
    }
  />
);

然后在登录组件中完成身份验证后，在重定向时执行以下操作。如果存在pathName，则它将从它到达的其他地方去。在我的情况下，它将重定向到/dash。

<Redirect
          to={
            this.props.location.state && this.props.location.state.from.pathname
              ? this.props.location.state.from.pathname
              : "/dash"
          }
        />

我在路由器内部使用“受保护的路由”

<PrivateRoute
          path="/someEndpoint"
          component={SideMenu}
          isLoggedIn={props.isLoggedIn}
        />

希望我能为您提供帮助。

重定向到您来自的页面

1 个答案: