重定向在反应中无法正常工作

Question

我想要的是：

我有一条专用路由（/ dashboard），仅当用户登录时才可以访问。因此，我的条件是仅当用户经过身份验证且加载为false（已完成）时才加载Dashboard。 如果用户未通过身份验证，则将其重定向到登录页面。

问题

如果我从导航栏中单击“仪表板链接”，则我的代码工作正常。 如果我登录，它将重定向到仪表板，但是当我尝试通过直接键入localhost：3000 / dashboard手动进入仪表板时，问题就出现了。 即使刷新仪表板，它也会将我重定向到登录页面。

原因

因此，导致此问题的原因是两个状态（身份验证和加载）都位于Redux中，因此，如果我直接访问仪表板，则Redux需要花费一些时间来登录用户并更改状态，因此即使我返回首页如果我已登录。

我需要花费一些时间，因为我在本地存储中有一个令牌，并且通过向后端发送发布请求以确认令牌是否有效来对其进行检查，在有效令牌上，我使用户进入还原状态。

码

在App.js中

<Switch>
          <Route exact path="/register" component={Register} />
          <Route exact path="/login" component={Login} />
          <PrivateRoute exact path="/dashboard" component={
</Switch>

PrivateRoute.js

const PrivateRoute = props => {
  let route = <Route {...props} component={props.component} />;

  if (!props.isLoading && !props.isAuthenticated) {
    route = <Redirect to="/login" />;
  }
  return <React.Fragment>{route}</React.Fragment>;
}

您会看到在“专用路由”中立即检查了该条件，由于该用户手动进入/ dashboard会被重定向到主页。

我该如何解决这个问题？

解决的问题：由于isLoading始终未定义，因此我有一点错字。 通过修复它，它工作正常

Answer 1

您可以通过将Web服务器重定向到React SPA的登录页面来解决此问题。 它可以是/login/但通常是/ 。 此时页面被重新加载，React应用程序开始重新执行，React代码确定（检查是否存在cookie，而不查看刚创建的Redux存储）用户未登录并在内部重定向从“ /”到“ / login /”。

Web服务器不会意识到此内部重定向，它在SPA内部。 但是，如果用户在导航栏上键入URL并按Enter（我知道是问题），则Web服务器将知道。

如果使用webpack-dev-server，则可以通过将historyApiFallback设置为true并指定重定向URL来实现SPA所需的重定向类型。