I have built an admin panel using react. After logging in to the panel whenever the user refreshes the page, everything disappears, I don't know why its happening. Its working fine without the signin page but after adding the signin page it doesn't. Here is the App.js file code where all the Routes are defined.
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;
The signedIn state only lives in memory, and the initial value is false. When you reload the page, you reload the app, which remounts/reinitializes the components.
The solution is typically to persist your app state to local storage, and initialize from localStorage.
Using a state lazy initializer function you can read the localStorage for the saved state and set the initial state.
const [signedIn, isSignedIn] = useState(() => {
return !!JSON.parse(localStorage.getItem("signedIn"));
});
Use an useEffect hook to persist state changes to localStorage. When a user signs in and the signedIn state updates, this will trigger the useEffect hook's callback and will save the state value into localStorage.
useEffect(() => {
localStorage.setItem("signedIn", JSON.stringify(signedIn));
}, [signedIn]);
The signedIn flag will be set to false on page refresh. Instead of using it in the state variable use the local Storage/ Session Storage.