How can I remove my <Routes> in order to upgrade to v6.4+?

[jasikpark]

<Routes> are incompatible w/ createBrowserRouter, so how can I refactor my app to use a different format while still allowing me to split up my routes into nested components?

Ref: #10350

[jasikpark]

https://github.com/remix-run/react-router/blob/main/decisions/0002-lazy-route-modules.md maybe provide info, though "lazy components" is a no-go w/ vite's css bundling issues

[jasikpark]

It seems like the only way to enable this is to use the object syntax, rather than the JSX syntax - #10160 since otherwise RRv6 will complain that there is indirection if you make a function that renders Route's

ex:

export function SettingsRoot() {

	return <Route element={<Layout/>}>
					<Route path="edit" element={<SettingsEdit/>}/>
					<Route path="view" element={<SettingsView/>}/>
				</Route>
}

will error, but using the object syntax won't. the only problem is that transitioning an app between the two syntaxes is an ordeal...

[brophdawg11]

<Routes> are incompatible w/ createBrowserRouter

Sorry for any confusion but this is definitely not the case! They're very much intended to be used together while apps migrate to RouterProvider. We're going to work on enhancing the docs to make this more clear, but for now there is additional context in this comment and in #10317 which does expose a small bug around sibling <Routes> and error boundaries. This bug is fixed by #10374.

[jasikpark]

Oh... I suppose the reason is that w/o #10374, they are data routes atm? but some of the bits kinda work, like unstable_useBlocker, but errorElement doesn't, since they aren't true data routes

[brophdawg11]

Yeah that makes sense. I guess technically useBlocker only requires that the routing is done via createBrowserRouter so if you have a RouterProvider at the top of your app that will work down into <Routes> since it runs at navigation time and doesn't need to traverse the route tree the same way that data loading and error bubbling does.

[jasikpark]

ooooh ok, hopefully for me that's the case then, since i have a "tablinks" component that has a form that uses that api, while I'd rather not lift that Routes up into the main routing, since it's a small part of the page

[jasikpark]

any way i can test the bugfix pr before the next version of RR is released?

[jasikpark]

whelp xD ig i'll have to revert to using the <Routes> version, since I have no way to render an element as a component in storybook... came up w/

import type { ReactElement } from 'react';
import { Route, RouterProvider, createMemoryRouter, createRoutesFromChildren } from 'react-router-dom';

type WithRoutesOptions = { disable?: boolean; initialRoute?: string; path?: string };

/** withRoutes is similar to withRouter, except it expect the story to be raw route elements
 * this isn't a traditional decorator b/c the routes are react elements and not react components.
 */
export const withRoutes = (routes: ReactElement, opts?: WithRoutesOptions) => {
  const Component = () => {
    const { disable = false, initialRoute = '/', path = '/*' } = opts ?? {};

    if (disable) {
      return routes;
    }

    const router = createMemoryRouter(createRoutesFromChildren(<Route path={path}>{routes}</Route>), {
      initialEntries: initialRoute ? [initialRoute] : undefined,
    });

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

  return Component;
};

but apparently storybook isn't a fan of dynamic "components" under documentation

[jasikpark]

I ended up w/ a bit of a weird solution, borrowing from #10160 pattern but w/ JSX:

import { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { Route, useNavigate } from 'react-router-dom';
import { LoadingSpinner } from '@components/patterns/loading/LoadingSpinner';
import { fallbackRenderNotFound } from '@screens/errors/fallbackRenderNotFound';
import { Titled, fromArray, page } from '@util/title';
import { RoleDetailPage } from './detail/RoleDetailPage';
import { RolesPage } from './list/RolesPage';

/**
 * RolesRoot contains all of the routing config for the /roles path
 */
export const RolesRoot = (
  <Route element={<Titled title={(title) => fromArray(['Roles', title])} />}>
    <Route index={true} element={<RolesPage />} />
    {/* https://stackoverflow.com/a/71038999 */}
    {['add', ':roleId'].map((path) => (
      <Route
        key={path}
        path={path}
        Component={() => {
          const navigate = useNavigate();

          return (
            <Titled title={() => page('Role')}>
              <ErrorBoundary fallbackRender={fallbackRenderNotFound}>
                <Suspense fallback={<LoadingSpinner />}>
                  <RoleDetailPage onCancel={() => navigate(-1)} />
                </Suspense>
              </ErrorBoundary>
            </Titled>
          );
        }}
      />
    ))}
  </Route>
);

then in the main routing file:

...
<Route path="roles/*">{RolesRoot}</Route>
...