flat-fuchsia•15mo ago

redirect issue

as soon as the page loads on the screen it should be redirected to the login page. I have made the login page, but it is not redirecting to the login page by default. can anyone provide any guidance and help me in this? <Route element={ <Authenticated fallback={<Outlet />}> <NavigateToResource resource="categories" /> </Authenticated> } > <Route path="/login" element={<Login />} /> <Route path="/register" element={<Register />} /> </Route> <Route path="*" element={<ErrorComponent />} /> </Routes>

3 Replies

kapa.ai•15mo ago

Hi @coops8. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To redirect users to the login page by default when the page loads, you can use the <Navigate> component from react-router-dom. You should wrap your routes with the <Authenticated> component and use the fallback prop to redirect unauthenticated users to the login page. Here's an example based on the code you provided:

import { Navigate } from "react-router-dom";

// ...

<Routes>
  <Route
    element={
      <Authenticated fallback={<Navigate to="/login" />}>
        <NavigateToResource resource="categories" />
      </Authenticated>
    }
  >
    <Route path="/login" element={<Login />} />
    <Route path="/register" element={<Register />} />
  </Route>
  <Route path="*" element={<ErrorComponent />} />
</Routes>

import { Navigate } from "react-router-dom";

// ...

<Routes>
  <Route
    element={
      <Authenticated fallback={<Navigate to="/login" />}>
        <NavigateToResource resource="categories" />
      </Authenticated>
    }
  >
    <Route path="/login" element={<Login />} />
    <Route path="/register" element={<Register />} />
  </Route>
  <Route path="*" element={<ErrorComponent />} />
</Routes>

In this example, if a user is not authenticated, they will be redirected to the /login route by default. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

<@992776053590339674> kapa.ai is still learning and improving, please let us how it did by reacting below

flat-fuchsia•15mo ago

The solution which i got, is just before closing of the </Routes> element, one need to add the <Route path="*" element={<Navigate to="/login" />} /> so any route other than the defined route, will be redirected to the "/login" page, automatically