How can I remove my <Routes>
in order to upgrade to v6.4+?
#10373
-
Ref: #10350 |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 9 replies
-
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 |
Beta Was this translation helpful? Give feedback.
-
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... |
Beta Was this translation helpful? Give feedback.
-
Sorry for any confusion but this is definitely not the case! They're very much intended to be used together while apps migrate to |
Beta Was this translation helpful? Give feedback.
-
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>
... |
Beta Was this translation helpful? Give feedback.
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.