errorElement never gets called when child Routes are in a <Routes> element

[jasikpark]

In a react-router app with nested routes, I have a component that looks like this:

function Example() {
  return (
    <Routes>
      <Route
        path="*"
        errorElement={<GotStartedRoutesError />}
        element={
          <NavLayout>
            <Routes>
              <Route
                path="*"
                element={
                  <GotStarted>
                    <Navigate to="/hosts" replace={true} />
                  </GotStarted>
                }
              />
              <Route
                path="hosts/*"
                element={
                  <GotStarted>
                    <HostsRoot />
                  </GotStarted>
                }
              />

              <Route path="*" element={<NotFound />} />
            </Routes>
          </NavLayout>
        }
      />
    </Routes>
  );
}

My problem is that react-router treats the Routes element as a top-level route and catches the error there instead of letting it fall through to the upper routes.

It would be great to document this if this is intentional, plus adding tests, since https://reactrouter.com/en/main/route/error-element#bubbling leads me to believe that I can just have a root error element and call it a day, rather than requiring that every Routes has a root Route that applies an errorElement to each route

[jasikpark]

I think my preference in that case would just to allow passing an errorElement to Routes, to prevent needing to nest another Route path="*" underneath if you want a single root error element

[jasikpark]

#10372 I have learned from #10317 and #10021 that Routes is not supported when used w/ createBrowserRouter

Hopefully #9996 will morph into a useful replacement

[brophdawg11]

There's a bit of confusion around the usage of <Routes> and <RouterProvider>. I tried to clarify a bit in this comment and this comment, and we will work on improving the docs around this as well.

But <Routes> is definitely supported when using createBrowserRouter - that's the key to the ability to incrementally migrate your app.

However, you cannot include an errorElement on any <Route>'s below a descendant <Routes> though, as is shown in the example above.

[jasikpark]

maybe there could be a warning logged when you try to pass data apis to a Route when it isn't in a data api context?