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 中導入一些東西......謝謝大家的努力