Composability of createBrowserRouter?

[voliva]

I've managed to migrate my app from v5 to v6 without too much hassle... Changing <Switch> to <Routes>, etc.

However, I was about to start a new project and decided to look at the new tutorial. In there I find that this way of defining routes is now replaced by a new way of doing them, directly on the RouterProvider:

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path="/"
      element={<Root />}
      loader={rootLoader}
      action={rootAction}
      errorElement={<ErrorPage />}
    >
      <Route errorElement={<ErrorPage />}>
        <Route index element={<Index />} />
        <Route
          path="contacts/:contactId"
          element={<Contact />}
          loader={contactLoader}
          action={contactAction}
        />
        <Route
          path="contacts/:contactId/edit"
          element={<EditContact />}
          loader={contactLoader}
          action={editAction}
        />
        <Route
          path="contacts/:contactId/destroy"
          action={destroyAction}
        />
      </Route>
    </Route>
  )
);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

I get that a good advantage of this is that now all routes are easily identifiable because they are all in a single place. However, I really liked the composability of the previous version, where on every level you could define the routes relative to that specific level.

You would have a component with a <Switch> (now <Routes>) that would just render the home page (/), or the contacts page (/contacts). Then the contacts component would have internally another with its own sub-routes. In a way, the top-level router doesn't care about what inner routes the child router has.

• I understand that the old way of doing routing is not deprecated, am I right?
• Are there plans of deprecating it?
• Is there any way of achieving something similar that the old API had vs this new one?
• How do you prevent the createBrowserRouter(...) to grow indefinetly as the project grows?
• Isn't it hard to tell what an <Outlet /> is going to be replaced with? (specially if there are multiple nested levels... I imagine you need to see how that component is rendered on the component tree, then look at the routes definition to find the path it's going to be filled with)

[codebutler]

@voliva this is a great list of questions, were you able to answer any?