Частный маршрут с Redux

Question

Я пытаюсь создать частный маршрут, который проверяет аутентификацию пользователя. Но приватный маршрут рендерится до того, как данные из редукса обновятся Компонент имеет переменную isauthenticated, которая в конечном итоге обновляется до true, но компонент визуализируется первым, прежде чем он будет обновлен. Поскольку при 1-м рендере его значение имеет значение false.

import React, { Component } from 'react'
import {connect} from 'react-redux'
import {Route, Redirect } from 'react-router-dom'

const PrivateRoute = ({component: Component, isAuthenticated, ...rest}) =>{
    return(
        <Route {...rest} render={
            (props) => {
                if(isAuthenticated) { 
                    return <Component {...props}/>
                }else{
                    return <Redirect to="/login"/>
                }

            }
        }/>
    )
}

const mapStateToProps = state =>{
    return{
        isAuthenticated: state.token !== null
    }
}

export default connect(mapStateToProps, null)(PrivateRoute)

Answer 1

Вы можете обернуть свой маршрутизатор внутри auth-is-loaded компонента:

import React from "react";
import { useSelector } from "react-redux";
import { isLoaded } from "react-redux-firebase";

export default function AuthIsLoaded({ children }) {
  const auth = useSelector(state => state.firebase.auth);

  if (isLoaded(auth)) return children;
  return <div>Loading...</div>;
}

Так приложение. js будет выглядеть так:

  return (
    <Provider store={store}>
        <BrowserRouter>
          <AuthIsLoaded>
            <NavBar />
              <Switch>
                <Route exact path="/" component={Home} />
                <PrivateRoute path="/about" component={About} />
                <PrivateRoute path="/profile" component={Profile} />
                <Route path="/login" component={Login} />
                <Route path="/signup" component={SignUp} />
                <Route path="/logout" component={Logout} />
              </Switch>
            </AuthIsLoaded>
        </BrowserRouter>
    </Provider>
  );

Так что после аутентификации загрузил ваш коммутатор будет обработан PrivateRoutes, который не получит isAuthenticated перед его редукционной загрузкой.

Извините за некоторый дополнительный код, я скопировал из своего приложения, но вы должны понять.