hilla icon indicating copy to clipboard operation
hilla copied to clipboard

RouterConfigurationBuilder withReactRoutes fails to render /

Open caalador opened this issue 1 year ago • 0 comments

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 image

System Info

Vaadin 24.4-SNAPSHOT

caalador avatar May 08 '24 09:05 caalador