react-router-dom PrivateRoute 与 redux 无限加载

Question

重新加载 PrivateRoute 在授权开始之前重定向到/login后，因为它们的初始redux状态都是false 。

这些是来自路由器的日志：

PrivateRoute.js:16加载： false isAuthenticated ： false
PrivateRoute.js:16加载： true isAuthenticated ： false
PrivateRoute.js:16加载： false isAuthenticated ： true

它工作正常，我只需要一种方法来区分初始状态和未经过身份验证的用户。

我的尝试

1. 我的第一个想法是将isLoading 的初始状态更改为true ：
   奇怪的行为。 页面根本不加载。 甚至整个 App 组件都无法挂载，所以我真的不知道发生了什么。
2. 将 isAuthenticated 的初始状态更改为 null 并更改条件

isLoading ? 

到

isAuthenticated === null ?

（下面的路由器）

在需要 PrivateRoute 之前，一切似乎都很好。 当调试器处于if语句时，一切都会再次冻结。

---

这是我在这里找到的 PrivateRoute 组件

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import Spinner from "../../components/Spinner";

const PrivateRoute = ({
  component: Component,
  isLoading,
  isAuthenticated,
  ...rest
}) => (
  <Route
    {...rest}
    render={props =>
      isLoading ? (
        <Spinner />
      ) : isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{ pathname: "/login", state: { from: props.location } }}
        />
      )
    }
  />
);

const mapStateToProps = state => ({
  isLoading: state.auth.isLoading,
  isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps)(PrivateRoute);

Answer 1

我花了大约 5 个小时才意识到我忘记在Spinner 中导入一些东西......谢谢大家的努力