Layouts with optional child route content don't work

[sissbruecker]

Describe the bug

I'm building a master-detail view. When I navigate to /master it should only show the master content. When I navigate to /master/detail it should show both the master and the detail content.

The views look like this:

// views/master/@layout.tsx
export default function MasterView() {
  return (
    <HorizontalLayout theme="padding spacing">
      <VerticalLayout theme="spacing">
        <h2>Hilla Master View</h2>
        <NavLink to="/master/detail">Open details</NavLink>
        <NavLink to="/master">Close details</NavLink>
      </VerticalLayout>
      <Outlet />
    </HorizontalLayout>
  );
}

// views/master/detail.tsx
export default function DetailView() {
  return (
    <VerticalLayout>
      <h2>Hilla Details View</h2>
    </VerticalLayout>
  );
}

According to the react-router Outlet docs that should work:

Renders the matching child route of a parent route or nothing if no child route matches.

However in Hilla, the outlet always tries to render a route, even if no existing route matches. That results in /master being rendered like this:

---

Note: This is a problem for the upcoming master detail layout component (vaadin/platform#7173), where we want to provide seamless integration with the routing mechanism. Depending on whether a details route is active, which is indicated to the component by the presence of an element that contains details content, the component should automatically show the details in a split pane, drawer, or overlay. If no details route is active, and there is no details element, it should only show the master content.

Expected-behavior

A router outlet should not render anything if there is no matching child route. Alternatively, there should be a mechanism to configure how an outlet behaves in this situation.

Reproduction

https://github.com/sissbruecker/hilla-nested-layout-issue

Check both the Flow and Hilla views:

• The Flow example does not render anything into the outlet if the details route is not active
• The Hilla example always renders content into the outlet

System Info

Hilla: 24.6.6
Flow: 24.6.6
Vaadin: 24.6.6
Spring Boot: 3.4.3
Spring: 6.2.3
Copilot: 24.6.6
Frontend Hotswap: Enabled, using Vite
OS: aarch64 Mac OS X 14.6.1
Java: Eclipse Adoptium 21.0.1
Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0
Java Hotswap: Hotswap is not enabled
IDE Plugin: Not installed

[Legioth]

One potential challenge here is that we don't know whether there's a Flow view that would match which means that we always have to ask Flow when there's no matching Hilla view and Flow will always give an answer. One simple workaround for this is to add an empty @index.tsx since that one would then be matched and thus prevent from delegating to Flow.