react-router-dom PrivateRoute with redux endless loading

Question

After reloading the PrivateRoute redirects to /login before the start of authorization, because initial redux state is false for both of them.

Those are logs from router:

PrivateRoute.js:16 Loading : false isAuthenticated : false
PrivateRoute.js:16 Loading : true isAuthenticated : false
PrivateRoute.js:16 Loading : false isAuthenticated : true

It is working correctly , I just need a way to distinguish initial state from not authenticated user.

My attempt

1. My first thought was changing initial state for isLoading to true :
   Weird behavior. Page doesn't load at all. Even whole App component can't mount so I don't really know what is going on.
2. Changing initial state for isAuthenticated to null and changing conditions from

isLoading ? 

to

isAuthenticated === null ?

(Router below)

Everything seems fine until PrivateRoute is required. When debugger is at the if statement everything freezes again.

---

This is my PrivateRoute component as I found Here

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 中导入一些东西......谢谢大家的努力