Route with "" path does not show up with Hilla @layout.tsx

[Artur-]

Description of the bug

If you have only @layout.tsx and one Flow view with @Route("") then the view is not shown.

Expected behavior

The view is shown

Minimal reproducible example

% npm init vaadin@latest                                                    

> npx
> create-vaadin

✔ Project name: … hilla-layout
✔ Example views: › Hilla (React + TypeScript)
✔ Features: › Use pre release

remove @index.tsx and any other client side view. Leave @layout.tsx.

Add a flow view with @Route("")

If you add one Hilla view, or leave the created about-hilla.tsx in the views folder, then the Flow view works

Versions

• Vaadin / Flow version: 24.7-SNAPSHOT

[Jusius]

yup i found this issue when updating to vaadin 24.6.0
the work around is adding the @index.tsx in the frontend/views/ folder

place the route link on this index.tsx

[tepi]

Looks like none of Flow's client side navigation logic is triggered in this case at all. Could not yet find the root cause for this.

[Jusius]

is it possible the issue lies on the hilla side ?

The reason I'm asking for a minimal project that shows the problem is that the FS-based routing is heavily based on convention-over-configuration, e.g. suggesting a file containing the layout should be named as @layout.tsx to be picked up by the FS Router. Now, in 24.6, Flow support for automatic Java layouts is added, so it means there's a chance that something in you project may not be as the framework expects.

i got this response from @taefi when i open the Issues on hilla

[tepi]

That's very possible. Unfortunately our documentation does not seem to describe this specific case, so I can't really say if it should work or not. To me it seems like a valid case though.

[mcollovati]

The issue could be that when there are no Hilla views but a @layout, the routes object built by RouterConfigurationBuilder has an entry for blank path, but without children, so it does not fallback to Flow.

routes object without Hilla view

[
 {
     "path": "",
     "element": {
         "key": null,
         "ref": null,
         "props": {},
         "_owner": null,
         "_store": {}
     },
     "handle": {
         "title": "Main Layout"
     }
 },
 {
     "path": "*",
     "element": {
         "key": null,
         "ref": null,
         "props": {},
         "_owner": null,
         "_store": {}
     }
 }
]

But if you add a Hilla view, then the blank path entry, in addition to the Hilla view, has an entry for * and another one with "index": true.

routes object with Hilla view

[
 {
     "path": "",
     "element": {
         "key": null,
         "ref": null,
         "props": {},
         "_owner": null,
         "_store": {}
     },
     "children": [
         {
             "path": "hilla",
             "element": {
                 "key": null,
                 "ref": null,
                 "props": {},
                 "_owner": null,
                 "_store": {}
             },
             "handle": {
                 "title": "hilla"
             }
         },
         {
             "path": "*",
             "element": {
                 "key": null,
                 "ref": null,
                 "props": {},
                 "_owner": null,
                 "_store": {}
             }
         },
         {
             "index": true,
             "element": {
                 "key": null,
                 "ref": null,
                 "props": {},
                 "_owner": null,
                 "_store": {}
             }
         }
     ],
     "handle": {
         "title": "Main Layout"
     }
 },
 {
     "path": "*",
     "element": {
         "key": null,
         "ref": null,
         "props": {},
         "_owner": null,
         "_store": {}
     }
 },
 {
     "index": true,
     "element": {
         "key": null,
         "ref": null,
         "props": {},
         "_owner": null,
         "_store": {}
     }
 }
]

If this is confirmed, the issue should be moved to the Hilla repository.