Redirect Router after loggedin

Question

Am trying to Redirect router to "/", without login it set to Landing.jsx, After login needs to redirect to Homepage.jsx which is also in same route "/". tried useNavigate, Its redirecting to "/" but it was set to Landing.jsx, only after refresh it sets the Homepage.jsx. Route method I used is mentioned below. Please help. The Validate is settedup when logged in was successfull.

const validate = localStorage.getItem('userLoggedInDetails');

<Router>
  <Header />
  <Routes>
    <Route path="/" element={validate ? <Homepage /> : <Landing />}></Route>
    <Route path="/login" element={<Login />}></Route>
    <Route path="/signup" element={<Signup />}></Route>
  </Routes>
</Router>

Answer 1

I assume you are using react.

React does not "react" to changes in localStorage. You need to use hooks like useState.

This was an easy enough problem to recreate and so I have created a CodeSandbox - https://codesandbox.io/s/sad-bohr-3eqy2o

I would recommend reading the documentation of react to avoid these kinds of issues.