Is it possible to get type safe routes when we have multiple routers in the same code-base?

[Svish]

The "shell" of our website is a CMS, and this CMS currently has 4 special pages where we mount react applications. There's one for users, one for companies, one for administration, and one more. Each of these are separate applications with their own react router, but they share a lot of code, and they're all built with a single webpack setup.

We set up the ReactRouterProvider like this:

import { useState } from 'react';
import {
  createBrowserRouter,
  useLocation,
  useNavigationType,
  NavigationType,
  type RouteObject,
} from 'react-router';
import { RouterProvider as ReactRouterProvider } from 'react-router/dom';

export function RouterProvider({
  basename,
  routes,
}: {
  basename: string;
  routes: RouteObject[];
}) {
  const [router] = useState(() =>
    createBrowserRouter(routes, {
      basename,
      future: {
        v7_fetcherPersist: true,
        v7_normalizeFormMethod: true,
        v7_partialHydration: true,
        v7_relativeSplatPath: true,
        v7_skipActionErrorRevalidation: true,
      },
    })
  );

  return <ReactRouterProvider router={router} />;
}

So each separate app uses this RouterProvider and passes their array of routes to it.

Is there any way to get route type safety for us? From the docs it seems only possible if there's only a single set of routes in the code-base? Is that correct, or is there a way to do this?

[sergiodxa]

The type-safety features are only enabled when using React Router framework mode, from your code you seem to be using it in library mode.

[Svish]

Ok, yeah, that's what it seemed like. Too bad, but would maybe be a bit hard to do as well, so it makes sense that it's not supported. Maybe later? 🤞