Aquí estoy usando react-router y usando condicionales para múltiples rutas. Estoy usando contexto para almacenar mi estado. Quiero cargar mis datos de localStorage al estado antes de que se cargue mi App.js, ya que indica a qué rutas debo navegar.
userContext.js
import React, { useState, createContext, useEffect } from "react"; export const userContext = createContext(); export const UserProvider = (props) => { const [user, setUser] = useState(null); const loadFromLocalStorage = () => { try { const serializedState = localStorage.getItem("state"); if (serializedState == null) return undefined; return JSON.parse(serializedState); } catch (err) { console.log(err); return null; } }; useEffect(() => { const state = loadFromLocalStorage(); console.log("state: ", state); setUser(state); }, []); return ( <userContext.Provider value={[user, setUser]}> {props.children} </userContext.Provider> ); }; export default userContext;Aplicación.js
import React, { useContext, useEffect } from "react"; import { Switch, Route, Redirect } from "react-router"; import userContext from "./context/userContext"; const App = () => { var routes = null; const [user, setUser] = useContext(userContext); console.log("app: ", user); console.log(routes); if (user == null) { routes = ( <div> <Switch> <Route path="/login" component={SignUp} /> <Redirect to="/login"></Redirect> </Switch> </div> ); } else { routes = ( <div> <Switch> <Route exact path="/news" component={NewsList} /> <Redirect to="/news"></Redirect> </Switch> </div> ); } return <div className="App">{routes}</div>; }; export default App;Dentro de su UserProvider, no represente a los elementos secundarios hasta que haya cargado los datos del almacenamiento local. Esto requerirá un estado adicional, pero nada tan malo, y este es un patrón común para el contexto/estado asíncrono:
export const UserProvider = (props) => { const [isReady, setIsReady] = useState(false); // other code removed for brevity useEffect(() => { const state = loadFromLocalStorage(); setIsReady(true); }, []) return ( <userContext.Provider value={[user, setUser]}> {isReady ? props.children : null} </userContext.Provider> ); }