Is it possible to split routing into multiple files with the new data APIs?

[WonkiestNebula]

In the older <BrowserRouter /> style, you could have several files that split the burden of routing for larger apps. I was wanting to use some of the new Data API features, but I can't seem to find any way to do that. Am I missing something, or is that not an option at this point?

Example of the old style:

//RouterOne.jsx
const RouterOne = () => {
  return (
    <Routes>
      <Route path='pathOne/*' element={<RouterTwo />} />
    </Routes>
  )
}

//RouterTwo.jsx
const RouterTwo = () => {
  return (
    <Routes>
      <Route path='pathTwo' element={<OtherThing />} />
    </Routes>
  )
}

And <OtherThing /> would be accessible at the route /pathOne/pathTwo

[dead1ock]

I haven't found a way to do this using createRoutesFromElements() without an error about duplicate routeIds. This is how I approached splitting up Routes using module exports.

// src/App.tsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import AppRoutes from 'routes';

const router = createBrowserRouter(AppRoutes);

export const App = () => {
  return (
      <RouterProvider router={router} />
  );
};

// src/routes/index.tsx

import AuthRoutes from './auth';
import ProfileRoute from './profile';

const AppRoutes = [
  {
    path: '/',
    element: <Root />
    children: [
      AuthRoutes,
      ProfileRoute,
      // etc...
    ]
];

export default AppRoutes;

// src/routes/auth/index.tsx

import LoginRoute from './login';
import LogoutRoute from './logout';
import CallbackRoute from './callback';

const AuthRoutes = {
  path: 'auth',
  children: [
    LoginRoute,
    LogoutRoute,
    CallbackRoute
  ]
}

export default AuthRoutes;

// src/routes/auth/login/index.tsx

import LoginPage from './LoginPage';

const LoginRoute = {
  path: 'login',
  element: <LoginPage />
}

export default LoginRoute;

// src/routes/profile/index.tsx

import ProfilePage from './ProfilePage';
import loader from './loader';

const ProfileRoute = {
  path: 'profile',
  element: <ProfilePage />
  loader
}

export default ProfileRoute;

[brophdawg11]

Yes the spread syntax should work fine. I would just move to JSON route by route as you lift a route from <Routes> to the createBrowserRouter.

[jasikpark]

A more concrete example:

export const GetStartedRootRouteConfig = {
  element: <Titled title={() => page('Get started')} />,
  children: [
    { path: 'revisit', element: <RevisitGettingStarted /> },
    {
      index: true,
      Component: () => {
        const navigate = useNavigate();
        return (
          <GetStartedPage
            onSuccess={() => navigate('/lighthouses', { replace: true })}
            onRevisit={() => navigate('revisit', { replace: true })}
          />
        );
      },
    },
  ],
} satisfies RouteObject;

<Route path="get-started/*" {...GetStartedRootRouteConfig} />

doesn't typecheck w/ the error

Type '{ element: Element; children: ({ path: string; element: Element; index?: undefined; Component?: undefined; } | { index: true; Component: () => Element; path?: undefined; element?: undefined; })[]; path: string; }' is not assignable to type 'IntrinsicAttributes & RouteProps'.
  Property 'index' is missing in type '{ element: Element; children: ({ path: string; element: Element; index?: undefined; Component?: undefined; } | { index: true; Component: () => Element; path?: undefined; element?: undefined; })[]; path: string; }' but required in type 'IndexRouteProps'.

[jasikpark]

ah, additional problem with spreading the nested routes in my example

[jasikpark]

So it seems I need to start at the routing tree root, and work my way out to the leaves

[AprilMay812]

Oh my god, thank you so much. I'm relatively new to using react-router, and you have no idea how much of a headache this was giving me trying to find an answer to this. Maybe I just need to work on my google-fu lol, but I could not for the life of me find an answer to this anywhere, or at least not one that made sense to me....

[amangeot]

Hello,
This seems to be working using a hook, even though passing a component returning the same JSX will throw an error:

export const useRoutes = () => {
  return (
    <>
      <Route path='/path' element={<Element />} />
      <Route path='/some-other-path' element={<Element />} />
    </>
  );
};

along with:

export const MyRoutes = () => {
  const routes = useRoutes();

  return (
    <Routes>
      {routes}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};

[jch422]

don't know why but my code works with

<Routes>
  {routes()}
  <Route path="*" element={<NotFound />} />
</Routes>