He construido un panel de administración usando reaccionar. Después de iniciar sesión en el panel cada vez que el usuario actualiza la página, todo desaparece, no sé por qué sucede. Funciona bien sin la página de inicio de sesión, pero después de agregar la página de inicio de sesión no funciona. Aquí está el código del archivo App.js donde se definen todas las rutas.
import React, { useState } from "react"; import { Route, Switch } from "react-router-dom"; import { Link } from "react-router-dom"; import * as FaIcons from "react-icons/fa"; import SideMenu from "./SideMenu"; import Dashboard from "./components/Dashboard"; import Registration_Request from "./components/Registration_Request"; import Users from "./components/Users"; import Seller from "./components/Request Pages/Seller"; import Reseller from "./components/Request Pages/Reseller"; import Sales from "./components/Request Pages/Sales"; import Sellers from "./components/Sellers"; import Character_Upload from "./components/Character_Upload"; import Campaign_Design from "./components/Campaign_Design"; import Levels_Design from "./components/Levels_Design"; import SellingCoins from "./components/SellingCoins"; import SignIn from "./SignIn"; function App() { let [signedIn, isSignedIn] = useState(false); return ( <> <div className="header"></div> <div className="main-content"> <Switch> <Route path="/" exact> <SignIn signedIn={signedIn} isSignedIn={isSignedIn} /> </Route> {signedIn && ( <> <SideMenu /> <Route path="/dashboard" exact component={Dashboard} /> <Route path="/registration-request/seller" component={Seller} /> <Route path="/registration-request/reseller" component={Reseller} /> <Route path="/registration-request/sales" component={Sales} /> <Route path="/users" component={Users} /> <Route path="/sellers" component={Sellers} /> <Route path="/character-upload" component={Character_Upload} /> <Route path="/campaign-design" component={Campaign_Design} /> <Route path="/levels-design" component={Levels_Design} /> <Route path="/sellingcoins" component={SellingCoins} /> </> )} </Switch> </div> </> ); } export default App;El estado signedIn solo vive en la memoria y el valor inicial es false . Cuando vuelve a cargar la página, vuelve a cargar la aplicación, que vuelve a montar/reinicializar los componentes.
La solución suele ser conservar el estado de su aplicación en el almacenamiento local e inicializar desde localStorage.
Usando una función de inicializador perezoso de estado , puede leer el almacenamiento local para el estado guardado y establecer el estado inicial.
const [signedIn, isSignedIn] = useState(() => { return !!JSON.parse(localStorage.getItem("signedIn")); }); Use un useEffect para conservar los cambios de estado en localStorage. Cuando un usuario inicia sesión y el estado de inicio de signedIn se actualiza, esto activará la devolución de llamada del gancho useEffect y guardará el valor del estado en localStorage.
useEffect(() => { localStorage.setItem("signedIn", JSON.stringify(signedIn)); }, [signedIn]);El indicador de inicio de sesión se establecerá en falso en la actualización de la página. En lugar de usarlo en la variable de estado, use el Almacenamiento local/Almacenamiento de sesión.