How to handle nested routes with (vite and) react-router?

[rolandjitsu]

I'm just wondering how one is supposed to handle nested routing when using the toolpad.

Currently, on the tutorial page, simple routing (/, /orders, /page-2) is illustrated. Similarly, on the react-router integration page, it illustrates how to set up react-router with toolpad to render pages within an <Outlet>, but only 1 level of routing.

If one needs to have routes such as /orders, /orders/:id, /orders/:id/foobar, what would be the right or recommended approach?

What I've done is:

1. Setup the router as:

const router = createBrowserRouter(
  [
    {
      Component: App,
      children: [
        {
          path: "/",
          Component: Layout,
          children: [
            {
              path: "/",
              Component: DashboardPage,
            },
            {
              path: "/orders",
              children: [
                {
                  path: "",
                  Component: OrdersPage,
                },
                {
                  path: ":id",
                  Component: OrderPage,
                },
              ],
            },
          ],
        },
      ],
    },
  ],
);

2. Setup the App as:

<AppProvider navigation={NAVIGATION} theme={theme} branding={BRANDING}>
  <Outlet />
</AppProvider>

3. Setup the Layout as:

<DashboardLayout>
  <PageContainer>
    <Outlet />
  </PageContainer>
</DashboardLayout>

With the above approach I had to:

1. Use the pattern for the Orders navigation to ensure that for child pages the menu item is still selected

{
  segment: "orders",
  title: "Orders",
  pattern: "orders{/:id}*",
},

2. Setup some logic to match on the path when it contains /orders/ and render a customized PageContainer that sets the title and breadcrumbs (as illustrated in the dynamic routes section of PageContainer)

I'm not sure if the approach makes sense or if I should have rendered another Outlet in the Orders page or if there's another way that's recommended.

I'm also facing other challenges such as the page container toolbar which needs to be different depending on the route. I'm also using path matching and rendering different toolbars based on the path. Is that the recommended approach in such cases?

[apedroferreira]

Hi! From what you describe your approach seems pretty much correct, we've been expanding on some examples gradually and have been running into the same types of use cases / scenarios.

For example, this is a router configuration I've added while setting up individual pages for orders:

const router = createBrowserRouter([
  {
    Component: App,
    children: [
      {
        path: '/',
        Component: Layout,
        children: [
          {
            path: '',
            Component: DashboardPage,
          },
          {
            path: 'orders',
            Component: OrdersPage,
          },
          {
            path: 'orders/:orderId',
            Component: OrderPage,
          },
        ],
      },
    ],
  },
]);

and navigation:

const NAVIGATION: Navigation = [
  {
    kind: 'header',
    title: 'Main items',
  },
  {
    title: 'Dashboard',
    icon: <DashboardIcon />,
  },
  {
    segment: 'orders',
    title: 'Orders',
    icon: <ShoppingCartIcon />,
    pattern: 'orders{/:orderId}?',
  },
];

For a custom title in the breadcrumbs, the best approach seems to be to check the path from the React Router hooks to set some conditional logic, yes. Let us know if you have any ideas on how that could be better!

There should be no need for more Outlets unless there's some shared layout you want to share between the nested pages, for example.

For the page container toolbar, the same approach as for customizing the title and breadcrumbs according to the current path seems to be the best way to do it. Again if you think that could be improved somehow let us know!

[rolandjitsu]

@apedroferreira thanks for taking the time to respond.

That leaves me with another challenge. Since the toolbar is used for actions that may trigger changes or a data fetch in different components (whatever is rendered in the outlet) and the other way, the toolbar may want to be aware that something's going on in the rendered component (in the outlet) - say we have a save button that should be disabled when "saving" - what would be your approach to handle that?

[apedroferreira]

That sounds like a standard use case for having the saving state be in a React context?

[rolandjitsu]

That sounds like a standard use case for having the saving state be in a React context?

Ok. Thanks for the help.

[apedroferreira]

Here's a quick simple CodeSandbox example if it helps:
https://codesandbox.io/p/devbox/crazy-https-66g4c5?workspaceId=ws_DRKKUErDGVJgP35ujtPhj9