parent of nested routes

Hello. Just looking for confirmation. I'm using Supabase Auth and that logic lives in RouteGuard. I'm pretty sure that all the routes nested within will be password protected.

My main question is: am I configuring the Index component correctly? Will I be able to access it? If an unauthenticated user goes to '/' (or any of the nested routes) they will be

navigate('/login')

navigate('/login')

navigate('/login')

navigate('/login').

I seem to be having an issue accessing '/' as an authenticated user. Should I rename the route for the Index component to someting like '/home'?

<Routes>
  <Route path="/pricing" component={Pricing} />
  <Route path="/login" component={Login} />
  <Route path="/" component={RouteGuard}>
    <Route path="/" component={Index} />
    <Route path="/chat" component={Chat} />
    <Route path="/billing" component={Billing} />
    <Route path="/profile" component={Profile} />
    <Route path="/settings" component={Settings} />
  </Route>
  <Route path="*" component={Sitemap} />
</Routes>

<Routes>
  <Route path="/pricing" component={Pricing} />
  <Route path="/login" component={Login} />
  <Route path="/" component={RouteGuard}>
    <Route path="/" component={Index} />
    <Route path="/chat" component={Chat} />
    <Route path="/billing" component={Billing} />
    <Route path="/profile" component={Profile} />
    <Route path="/settings" component={Settings} />
  </Route>
  <Route path="*" component={Sitemap} />
</Routes>

<Routes>
  <Route path="/pricing" component={Pricing} />
  <Route path="/login" component={Login} />
  <Route path="/" component={RouteGuard}>
    <Route path="/" component={Index} />
    <Route path="/chat" component={Chat} />
    <Route path="/billing" component={Billing} />
    <Route path="/profile" component={Profile} />
    <Route path="/settings" component={Settings} />
  </Route>
  <Route path="*" component={Sitemap} />
</Routes>

<Routes>
  <Route path="/pricing" component={Pricing} />
  <Route path="/login" component={Login} />
  <Route path="/" component={RouteGuard}>
    <Route path="/" component={Index} />
    <Route path="/chat" component={Chat} />
    <Route path="/billing" component={Billing} />
    <Route path="/profile" component={Profile} />
    <Route path="/settings" component={Settings} />
  </Route>
  <Route path="*" component={Sitemap} />
</Routes>

parent of nested routes

Similar Threads

Similar Threads

Similar Threads