Page is refreshed by calling history.go(), while history.back() isn't

We have iframe based micro-frontends. There is a need of changing the state of the inside app from outside one without full-reloading of the inside one. There is <BrowserRouter /> which uses Native History API.

I have tested the behavior on single app without any iframes.

When I click anchors in the app, React router doesn’t refresh the whole app, and replaces parts of the app. In my case – it’s pagination.

I can call window.history.back() and it will not trigger page refresh. The same, I can do window.history.go(-1) and it will not trigger page referesh.

Then I decided what if I make window.history.pushState(null, null, 'page/2') and call window.history.go() – page will be refreshed from scratch.

I can solve my task by replacing BrowserRouter by Router and exposing history object to window.ReactRouterHistory, but I think it’s too much, when I can do window.history.back() without a page refresh.

Is it a bug? Why the page is fully refreshed by go(), but isn’t when go(-1)? Is there a proper way to do this?

Thank you!

[StringEpsilon]

Unfortunatly, there is no API to get notified about window.history.pushState() and window.history.replaceState(), as the browser will only fire onpopstate when the user navigates.

This library would need to monkeypatch the two functions to add in events or a callback.

[StringEpsilon]

History version 5 has support for custom window objects to enable easier use of iframes (see #624 ). I’m afraid you just have to wait for react-router version 6 to come out or risk the beta.

Also, I think you should probably seek advice on stackoverflow and or reactiflux on this. https://www.reactiflux.com/ This is clearly a support question and not a feature request or bug report.