[Bug]: extranaeous warnings

[Pinpickle]

What version of React Router are you using?

6.4.3

Steps to Reproduce

I'm trying to write a component that handles more than 1 path, but where the top level router doesn't prescribe how those routes are rendered.

Something like (codesandbox)

export default function App() {
  return (
    <MemoryRouter initialEntries={["/a/second"]}>
      <Routes>
        <Route element={<AComponent />}>
          <Route path="/a/first" />
          <Route path="/a/second" />
          <Route path="/a/third" />
        </Route>
      </Routes>
    </MemoryRouter>
  );
}

function AComponent() {
  return (
    <Routes>
      <Route path="/a/first" element="First" />
      <Route path="/a/second" element="Second" />
      <Route path="/a/third" element="Third" />
    </Routes>
  );
}

Now, I know the conventional way to do this is to have <Route path="/a/*" layout={<AComponent />} /> at the top level, but I don't want <AComponent /> being responsible for any other paths, so /a/notaroute would not be rendered.

Expected Behavior

My routes are rendered with no warnings

Actual Behavior

Both App and AComponent issue separate warnings, despite them acting as intended.

App

Matched leaf route at location "/a/second" does not have an element. This means it will render an with a null value by default resulting in an "empty" page."

AComponent

You rendered descendant (or called useRoutes()) at "/" (under ) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.

Please change the parent to . "

However, these components are working exactly as I expect them to, and this is quite a lot of noise. Can I disable them somehow?

Or, is there a better way to achieve what I'm trying to do?