How to make the app redirect me to login if there is no user

Question

why doesn't this work? And it doesn't redirect me to login if there is no user?

          {user ?
            <>
              <Route path="/" exact element={<HomePage />} />
              <Route path="*" exact element={<ErrorPage />} />
              <Route path="/moviedetail" exact element={<MovieDetails />} />
              <Route path="/categories" exact element={<Categories />} />
            </> :
            <Navigate to="/login" />
          }

Answer 1

This don't work because you put <Navigate to="/login" /> inside BrowserRouter component, just move it outside, try this below:

<BrowserRouter>
  ...
  <Route path="/" exact element={<HomePage />} />
  <Route path="*" exact element={<ErrorPage />} />
  <Route path="/moviedetail" exact element={<MovieDetails />} />
  <Route path="/categories" exact element={<Categories />} />
  ...
<BrowserRouter />
{!user && <Navigate to="/login" replace={true} />}