render components conditionally base on localStorage

this is my code , I am try to render my screens container div base on token saved in localStorage, I use useState to save my token but when you logOut or logIn you need to refresh, I do not know how to useEffect here to re-render base on localStorage. I want to whenever user logged in or logged out my app component get rendered .

function App() {
  const [isloggedIn, setIsLoggedIn] = useState(localStorage.getItem("token"));
return (
   
      <BrowserRouter>
        <Routes>
          <Route
            path="/login"
            element={<Login />}
          />
        </Routes>

        {isloggedIn && <div className="screens-container">
            <Sidebar />}
          <div className="screens-section-container">
            <Navbar />
            <Routes>
              <Route element={<PrivateRoutes />}>
                <Route
                  element={<Home />}
                  path="/"
                  exact
                />
              </Route>
            </Routes>
          </div>
        </div>}
      </BrowserRouter>
   
  );
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/4s0dOAr