Getting warning: "You cannot change <Router history>" after switching

[Sawtaytoes]

I was using react-router-redux v5 before and switched to connected-react-router. Now, when updating certain files, I receive the warning:

<Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

Warning: You cannot change <Router history>.

Since I didn't get this error before with react-router-redux, I'm wondering if there's a different issue going on.

store.js

const enhancers = (
  composeWithDevTools(devToolsOptions)(middleware)
)

const store = (
  createStore(
    connectRouter(history)(
      rootReducer
    ),
    initialState,
    enhancers,
  )
)

const onHotReload = () => {
  store
  .replaceReducer(
    connectRouter(history)(
      rootReducer
    ),
  )
}

(
  module
  .hot
)
&& (
  module
  .hot
  .accept(
    '@shared/reducers',
    onHotReload,
  )
)

export {
  history,
  store,
}

ClientRoot.js

import React from 'react'
import { ConnectedRouter } from 'connected-react-router'
import { Provider } from 'react-redux'

import AppRoot from '@shared/components/root/AppRoot'
import { history, store } from '@shared/reducers/store'

const ClientRoot = props => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <AppRoot {...props} />
    </ConnectedRouter>
  </Provider>
)

export default ClientRoot

[terminalqo]

@Sawtaytoes Did you fixed this ?

I use parcel.js and same problem: that everytime I save the index.js file,

below this will not warning.

const store = createStore(
  connectRouter(history)(rootReducer),
  compose(
    applyMiddleware(
      sagaMiddleware,
      routerMiddleware(history),
    ),
  ),
);

sagaMiddleware.run(rootSaga);

ReactDOM.render(
  <Provider store={store}>
    <div>11122</div>
  </Provider>,
  document.getElementById('app'),
);

below will cause warning:

const store = createStore(
  connectRouter(history)(rootReducer),
  compose(
    applyMiddleware(
      sagaMiddleware,
      routerMiddleware(history),
    ),
  ),
);
sagaMiddleware.run(rootSaga);

const a = (
  <ConnectedRouter history={history}>
   <div>2222</div>
  </ConnectedRouter>
);

ReactDOM.render(
  <Provider store={store}>
    {a}
  </Provider>,
  document.getElementById('app'),
);

So I'm pretty sure is connectedRouter have something wrong.

[Sawtaytoes]

@weishijun14 I was unable to fix the issue. There's an underlying bug in connected-react-router as far as I know.

I think this is the fix: #140.

[tomtom94]

Guys, please, just do like this

export const createHistory = (initialEntries = ['/']) => {
  if (process.env.BROWSER) {
    const history = window.browserHistory || createBrowserHistory();
    if (process.env.NODE_ENV === 'development' && !window.browserHistory) {
      window.browserHistory = history;
    }
    return history;
  }
  return createMemoryHistory({ initialEntries });
};

The source is https://github.com/manuelbieh/react-ssr-setup/blob/master/src/shared/store/history.ts#L7

It works for me cheers ;)

[Sawtaytoes]

@tomtom94 While it's been a long time since I posted this issue, it didn't have to do with SSR. It was client-side only.

[rendomnet]

I have this issue too.

[jelling]

I'm not using supastate but the issue for me was that I had some files using import { useHistory } from "react-router-dom"; and others using import { useHistory } from "react-router"; Resolving all to use react-router-dom fixed it for me.