React, Redux и аутентификация маршрутизатора

Question

Не знаю, хороший это вопрос или нет. Тем не менее, я искал несколько часов, и я не могу найти удовлетворительного ответа на мою проблему. Для краткости, в моем роутере, когда я направляюсь к / dashboard; Я хочу проверить, вошел ли пользователь в систему. Если пользователь не вошел в систему, я хочу перенаправить его на мою страницу входа. Единственная проблема, я получаю свою переменную isAuthenticated (вошел в систему) от redux, которая занимает секунду для загрузки. Таким образом, всякий раз, когда я проверяю, моя переменная оказывается нулевой.

Вот код,

import React, { Component } from "react";
import Home from "./pages/Home";
import Testimonials from "./pages/Testimonials";
import Pricing from "./pages/Pricing";
import Login from "./pages/Login";
import Register from "./pages/Register";
import DashboardHome from "./pages/Dashboard/DashboardHome";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
class AppRouter extends Component {
  static propTypes = {
    isAuthenticated: PropTypes.bool
  };

  render() {
    return (
      <Router>
        <Switch>
          <Route path="/register">
            <Register />
          </Route>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/pricing">
            <Pricing />
          </Route>
          <Route path="/testimonials">
            <Testimonials />
          </Route>
          <Route path="/dashboard">
            this.props.isAuthenticated ?<DashboardHome /> :
            <Redirect to="/login" />
          </Route>

          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </Router>
    );
  }
}

const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps, {})(AppRouter);

Огромная благодарность всем, кто помогает. Все еще новичок реагирует и прибавляет.

Answer 1

Вы можете установить свои компоненты defaultProps. Более подробная информация здесь: https://reactjs.org/docs/react-component.html#defaultprops

AppRouter.defaultProps = {
  isAuthenticated: false
};

Примечание: Экспериментальный компонент Suspense React может быть полезен для вас, если вы хотите визуализировать загрузку компонент во время аутентификации пользователя. Больше информации здесь: https://reactjs.org/docs/concurrent-mode-suspense.html