hilla
hilla copied to clipboard
RouterConfigurationBuilder withReactRoutes fails to render /
Describe the bug
If when using the RouterConfigurationBuilder you define the routes manually in withReactRoutes() and have a base route / and set the withFallback(Flow) the base route will try to get the view from the server instead of using the defined route and element.
Expected-behavior
Defined '/' path element is shown.
Reproduction
Take the flow-hilla-hybrid-example.
Create routes.tsx to frontend folder using reactRoutes defined as follows
import { RouterConfigurationBuilder } from '@vaadin/hilla-file-router/runtime.js';
import Flow from 'Frontend/generated/flow/Flow';
import MainLayout from "Frontend/views/@layout";
import Login from "Frontend/views/login";
import HillaView from "Frontend/views/hilla";
import AboutView from "Frontend/views/about";
import MainView from "Frontend/views/@index";
export const { router, routes } = new RouterConfigurationBuilder()
// To define routes manually or adding an individual route, use the
// following code and remove (1):
.withReactRoutes(
[
{
element: <MainLayout />,
handle: { title: 'Main' },
children: [
{ path: '/', element: <MainView />, handle: { title: 'main' } },
{ path: '/hilla', element: <HillaView />, handle: { title: 'Hilla' } },
{ path: '/about', element: <AboutView />, handle: { title: 'About' } }
],
},
{ path: '/login', element: <Login />, handle: { title: 'Login' } }
]
)
.withFallback(Flow)
.protect()
.build();
Update frontend/index.tsx to use the manual routes file instead of the generated one.
Start application and navigate to / and instead of the public main view you get the server-side 404 view not found
System Info
Vaadin 24.4-SNAPSHOT