[Bug]: layout routes shouldn't match their parent's path

[ryanflorence]

What version of React Router are you using?

v6

Steps to Reproduce

<Routes>
  <Route element={<Layout />}/>
    <Route path="/privacy" element={<Privacy />} />
  </Route>
  <Route index element={<Index />} />
</Routes>

Visit "/"

Expected Behavior

The index route should render. The layout shouldn't match.

Actual Behavior

The layout route renders!

At first I was thinking index routes just need to rank higher, but realized that a layout route, without any matching children, shouldn't even be matching in the first place.

<Layout/> shouldn't match "/", it should only match "/privacy".

If you reorder the routes it works:

<Routes>
  <Route index element={<Index />} />
  <Route element={<Layout />}/>
    <Route path="/privacy" element={<Privacy />} />
  </Route>
</Routes>

But v6 is smarter than that.

A good test case might not involve index routes at all and just assert the layout route doesn't match if its child routes don't match.

[timdorr]

Just a heads up: your example where you reorder the routes is the same code as above.

[mjackson]

This was fixed in 6ab98d3 and will be released in beta.6