Come utilizzare React Routes con condizioni e Redux?

Question

Sto lottando con la creazione di un'autenticazione con React Redux e Routes.

A seconda della variabile responsabile dell'autenticazione, l'utente ottiene un certo insieme di rotte. Ma al momento del caricamento iniziale, quando la variabile non ha ancora ricevuto un valore dal redux store, vengono visualizzate le rotte per un utente non registrato, cioè la pagina di registrazione, e solo allora le pagine necessarie.

Si scopre che ogni volta che si aggiorna la pagina di registrazione lampeggia.

Codice in routes.js:

export const RotesPage = ({ isAuthenticated }) => {
  if (isAuthenticated) {
    return (
      <div>
        <Switch>
          <Route path="/" exact>
            <MainPage />
          </Route>
          <Route path="/schedule" exact>
            <SchedulePage />
          </Route>
          <Route path="/tasks" exact>
            <TasksPage />
          </Route>
          <Route path="/money" exact>
            <MoneyPage />
          </Route>
          <Redirect to="/" />
        </Switch>
      </div>
    );
  }

  if (!isAuthenticated) {
    return (
      <Switch>
        <Route path="/login" exact>
          <LoginPage />
        </Route>
        <Route path="/register" exact>
          <RegisterPage />
        </Route>
        <Redirect to="/login" />
      </Switch>
    );
  }
};

Codice in App.js:

import React, { useEffect } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { loadUser } from "./actions/authAction"; 
import { AppNavbar } from "./layouts/components/AppNavbar";
import { RotesPage } from "./routes";

const App = () => {
  const dispatch = useDispatch(); 
  const auth = useSelector((state) => state.auth);
  const isAuthenticated = auth.isAuthenticated;

  useEffect(() => {
    dispatch(loadUser());
  }, [dispatch]);

  return (
    <Router>
      {isAuthenticated && <AppNavbar />}
      <RotesPage isAuthenticated={isAuthenticated} />
    </Router>
  );
};

export default App;

Come posso ripararlo?

PS Scusa se lo scrivo male, perché non sto imparando solo i linguaggi di programmazione ma anche l'inglese.

PPS È il mio primo Q qui.

Grazie in anticipo =)

Answer 1

Nel tuo stato di redux imposta la isLoadingvariabile che inizialmente sarà true, una volta ottenuto l'autenticazione dei dati, impostala su false.

Quindi nella tua app puoi fare qualcosa come:

  const auth = useSelector((state) => state.auth);
  const isAuthenticated = auth.isAuthenticated;
  const isLoading = auth.isLoading;

<Router>
  {isLoading ? (
    <div>Loading...</div>
  ): (
    <>
      {isAuthenticated && <AppNavbar />}
      <RotesPage isAuthenticated={isAuthenticated} />
    </>
  )}
</Router>