Browser back navigation does not work when using replaceState with React enabled

[eberleant]

Description of the bug

If the current page used replaceState to modify the page history in an afterNavigation observer (for example, to add a query parameter), page history gets messed up. This causes back navigation using the browser back button to go back to 2 pages ago, instead of one page ago.

This worked in v23 but is broken in v24. A workaround is to disable React.

Expected behavior

Back navigation should only go back one page.

Minimal reproducible example

react-router-back-nav.zip

Run using mvn jetty:run and open localhost:8080.

Versions

• Vaadin / Flow version: 24.4.10

[tepi]

The issue was assigned to a developer and is currently being investigated

[tepi]

Tested the given example. Looks like it is working as intended, since replaceState, as it's name suggests, replaces the URL in history without adding anything to the history. Changing replaceState to pushState in the example project produces expected results. Would this solution be ok for you?

The only difference between the two calls is that replaceState sends replace: true to react router, whereas pushState sends replace: false.

[tepi]

Here's a similar example from https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState. Looks like replaceState in vaadin-router has been working the wrong way all along.