navigation issue with hybrid application

[ZheSun88]

Describe the bug

Using 24.4.0.beta2 in a hybrid application causes a blank UI after navigating between different routes

Expected-behavior

UI are loaded correctly.

Reproduction

download the app using this preset https://start.vaadin.com/dl?&preset=test-hybrid-react&projectName=test-hybrid-react&preset=partial-prerelease
unzip
./mvnw
navigate to localhost:8080 [1]
click Hello Hilla
click Hello Flow [2]

• [1]

• [2] the url goes to about:blank#blocked and leave a blank screen

System Info

Vaadin: 24.4.0.beta2

[ZheSun88]

some discussions are posted in https://github.com/vaadin/hilla/issues/2408

[Artur-]

When opening / you already see

[Artur-]

The path for the first nav item is set to // which is causing the issue

[mcollovati]

[manolo]

@Artur- is this related on how start ships the application, or should it fixed in hilla?

[manolo]

well, seems that is a flow issue how it propagates the routes to the menu

[Legioth]

The application contains a @Route(value = "/:samplePersonID?/:action?(edit)") view and the main problem is that this URL is added as-is to the menu even though you cannot navigate to that URL.

• Optional parameters should be left out from the URL in the menu.
• Views with non-optional parameters should not be shown in the menu at all.

This is basically the same logic that should also be in the default 404 view in dev mode so there might be an opportunity to share some code there.

There's also a secondary issue about how trying to navigate to a nonsensical URL like that leads to a redirect to #blocked but that might just be the way React Router deals with special characters that should really be escaped in URLs.

[tltv]

Fix should go to Hilla for 24.4 (RouteUnifyingIndexHtmlRequestListener) and to flow for 24.5 (MenuRegistry). Code that transforms server routes into AvailableViewInfo was moved to Flow.