history.push not causing the location to change when ssr

Question

I have the following server code:

  const store = configureStore({}, history);

  const context: any = { store };

  const app = (
    <Provider store={store}>
      <StaticRouter location={req.url} context={context}>
        <Application />
      </StaticRouter>
    </Provider>
  );
// render app

And the following client side Connected Router:

    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Application />
      </ConnectedRouter>
    </Provider>

I can see that the middleware is correctly hooked up and the history.push method is being called here.

But the browser does not redirect.

What would cause the browser not to redirect?

Answer 1

It turns out I had 2 different instances of history, 1 in the router middleware and 1 in the ConnectedRouter.

Ensuring they both had the same instance fixed the problem.

I have this file which I import it wherever I need it:

import { createBrowserHistory } from 'history';
import { createMemoryHistory } from 'history';
import { RouterHistory } from '../types';
const selectedHistory: RouterHistory = typeof window !== 'undefined' ? createBrowserHistory : createMemoryHistory;

export const history = selectedHistory();

And then make sure I import this file and don't make multiple copies of the history:

import { history } from '../../routes/history';
//etc.
          <ConnectedRouter history={history}>