React router v6 routes with Fallback

February 16, 2022

How to implement routes with fallback in the react router v6.
I got this error:

Uncaught Error: [RouteWithFallbackBoundary] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

const RouteWithFallbackBoundary = (props: PathRouteProps) => (
    <Route {...props}>
        <MyErrorBoundary key={props.path}>
            <Suspense fallback={"loading"}>{props.children}</Suspense>
        </MyErrorBoundary >
    </Route>
);

const MY_ROUTES = {
    test: {
        path: '/test',
        component: lazy(() => import('../Component/Test')),
    }
}

  <Routes>
            <RouteWithFallbackBoundary path={MY_ROUTES.test.path}>
                <MY_ROUTES.test.component />
            </RouteWithFallbackBoundary>
  </Routes>

>Solution :

You just need to invert the Route and the RouteWithFallbackBoundary components so the Route is what is rendered into the Routes component.

Example:

const RouteWithFallbackBoundary = ({ children }) => (
  <MyErrorBoundary>
    <Suspense fallback={"loading"}>
      {children}
    </Suspense>
  </MyErrorBoundary >
);

…

<Routes>
  <Route
    path={MY_ROUTES.test.path}
    element={(
      <RouteWithFallbackBoundary>
        <MY_ROUTES.test.component />
      </RouteWithFallbackBoundary>
    )}
  />
</Routes>