History#replaceState trigger navigation event with React router

[leluna]

Description of the bug

When using React router, History#pushState and #replaceState trigger navigation event (trigger HISTORY, coming from a dom event "ui-navigate"). Even if only query parameters are changed.

With Flow Router, no navigation event occurs, not matter which part of the path has changed.

May relate to

• 19580 Also has something to do with breaking behavior change in History#replaceState with React Router

• 19540 Also has something to do with undesired navigation event

• 19494 Also has something to do with undesired HISTORY navigation event if the target URL does not exactly match the current one

• 19539 This sounds like a similar fix, but only applied to pushState. Indeed, pushState work as Flow Router and also as I would expect.

Expected behavior

No navigation events on History#pushState and #replaceState. If a navigation event is desired, I would use UI.navigate.

Minimal reproducible example

I modified the example from a comment in #19580

@Route(value = "test/:path?")
public class TestView extends VerticalLayout implements BeforeEnterObserver, BeforeLeaveObserver {

    public TestView() {
        add(new Button("replace state - no query params",
                event -> UI.getCurrent().getPage().getHistory().replaceState(null, "test")));
        // no navigation only if the current URL is the same including query params
        add(new Button("replace state - push query param",
                event -> UI.getCurrent().getPage().getHistory().replaceState(null, "test?new")));
        // no navigation only if the current URL is the same including query params
        add(new Button("replace state - change path param",
                event -> UI.getCurrent().getPage().getHistory().replaceState(null, "test/new")));
        // no navigation only if the current URL is the same including query params
        add(new Button("push state - no query params",
                event -> UI.getCurrent().getPage().getHistory().pushState(null, "test")));
        // no navigation
        add(new Button("push state - query param",
                event -> UI.getCurrent().getPage().getHistory().pushState(null, "test?new")));
        // no navigation
        add(new Button("push state - change path param",
                event -> UI.getCurrent().getPage().getHistory().pushState(null, "test/new")));
        // no navigation
    }

    @Override
    public void beforeEnter(BeforeEnterEvent event) {
        add(new Div("beforeEnter"));
    }

    @Override
    public void beforeLeave(BeforeLeaveEvent beforeLeaveEvent) {
        add(new Div("beforeLeave"));
    }
}

Versions

• Vaadin / Flow version: 24.4.3
• Java version: 17
• OS version: Windows
• Browser version (if applicable):
• Application Server (if applicable): Spring Boot
• IDE (if applicable):

[alexanoid]

I can confirm that the following code:

ui.get().getPage().getHistory().replaceState(null, urlWithParameters);

cause the following issue: https://github.com/vaadin/flow/issues/19540