Best way to handle nested routes, where no index page is available for the root endpoint.

[thevipinmishra]

I'm sure the title is confusing, but let me explain it.

I want to have my URLs like this, where each flow is "role" based.

1. Admin

/admin/users

2. Cedent

/cedent/quotes

3. User

/user/documents

Now, this might look straightforward, but the catch here is that, I don't want to render/show anything on /admin, /cedent or /user, these endpoints are just to isolate the role based flows, kinda visually.

Does that make sense?

Right now, I'm just doing something like this.

if (location.pathname === "/admin" || location.pathname === "/admin/") {
       return <Navigate to={path.admin.dashboard} replace />;
}

Just manually handling the redirection.

Is this the ideal way, or I shouldn't just keep my URLs this way, or is there a better/ideal way to handle this?

[kiliman]

I think redirecting to a default page is fine, but instead of using logic, you can declaratively define this configuration.

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="admin">
      <Route index element={<Navigate to="users" />} />
      <Route path="users" element={<AdminUsers />} />
    </Route>
  </Route>
</Routes>

https://stackblitz.com/edit/github-qrmw9l?file=src%2FApp.tsx

[thevipinmishra]

I think redirecting to a default page is fine, but instead of using logic, you can declaratively define this configuration.

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="admin">
      <Route index element={<Navigate to="users" />} />
      <Route path="users" element={<AdminUsers />} />
    </Route>
  </Route>
</Routes>

https://stackblitz.com/edit/github-qrmw9l?file=src%2FApp.tsx

Sorry, I forgot to mention, I'm using the new data router, ie. using createBrowserRouter() & .

Just making sure if that would also be fine?

[kiliman]

Yes, this works with data router as well.

  {
    path: 'admin',
    Component() {
      return (
        <div>
          <h1>Admin Layout</h1>
          <Outlet />
        </div>
      );
    },
    children: [
      {
        index: true,
        loader: () => redirect('users'),
      },
      {
        path: 'users',
        Component() {
          return <h2>Users List</h2>;
        },
      },
    ],
  },

https://stackblitz.com/edit/github-mab5w2?file=src%2Fapp.tsx