Possible Bug? Splat routes inside layout routes only match when there are at least two splats along the path

[tommie-lie]

I am not sure if this should be a bug, but I'm definitely puzzled by the behavior.

I have a route layout like this:

<Route path="foo" element={<Outlet />}>
  <Route element={<FooProviders />}
    <Route path="*" element={<FooScreen />}>
      <Route path="details" element={<FooDetails />} />
    </Route>
  </Route>
</Route>

Expected behavior:

• when on foo, I expect <FooScreen /> to be rendered
• when on foo/details I expect <FooScreen /> (which has an <Outlet /> and <FooDetails /> to be rendered

Actual behavior:

• foo/details works as expected
• when on foo, only the element from the foo route is rendered, not the <FooScreen /> from the splat route.

When I add a splat to the layout route, everything works and I could accept that, but in the actual application, I have several layout routes and only one of them needs the splat: more complex example on stackblitz
In the stackblitz example, the working path has three layout routes but only the second one has the splat.

Is this a bug (I could live with both variants working or not working) or can someone explain the logic behind this behavior?