Directly called `window.history.pushState` is ignored by RR 3.2.1

[kirill-konshin]

I am using quite an outdated version of RR and I am facing an issue when directly called windown.history.pushState is ignored by RR 3.2.1.

Version

"react-router": "3.2.1"

Test Case

https://codesandbox.io/s/84w232m6r9

Steps to reproduce

Simply click "Go to About" which will call window.history.pushState(null, null, '/about').

Expected Behavior

Router transitions to appropriate page.

Actual Behavior

Nothings happens.

[pshrmn]

You will need to navigate using your application's history object, not the global window.history object.

history uses the observer pattern; callbacks are registered with a history instance and whenever navigation happens, the callbacks are called.

This only works for navigation performed by the history object (e.g. history.push(), history.replace() and history.go()).

const history = createBrowserHistory();
history.listen(() => {
  console.log("ooh, a navigation!");
});
history.push("/abou");

// console
> ooh, a navigation!

Navigation outside of a history object, cannot be detected by a history object, so it cannot know to inform its observers (the callbacks) about the navigation.

[kirill-konshin]

Thanks for the quick answer! But that's completely not what I was looking for.

Unfortunately, I cannot use RR's history, because window.history.pushState is being called outside of the React app (we embed React app in a main app), so I was expecting that RR will respect browser's default functionality.

Any other suggestions? Please reopen...

[pshrmn]

Your app's history instance is the one source of truth for navigation. There is no way for React Router to detect history.pushState() calls because there is no event emitted from them (as opposed to the popstate event that is emitted for window.history.go() calls). Any navigation done outside of your history instance (even with a second `history instance) is essentially invisible to React Router.

As for possible solutions, you can create a history module that is importable throughout your application so that you can navigate from outside of React.

// history.js
import { createBrowserHistory } from "history";

// actual implementation might be slightly more involved
// see: https://github.com/ReactTraining/react-router/blob/v3/modules/browserHistory.js
export default createBrowserHistory();

// react-app.js
import history from "./history";
ReactDOM.render(
  <Router history={history} />,
  root
);

// main-app.js
import history from "./history";

history.push({ pathname: "/about" });

[kirill-konshin]

Yep, looks like sharing the history object is the only possible solution...