react-router-redux: Using store.dispatch(push('some/url')) then hitting back button doesn't return you to expected route

[rokit]

Version

5.0.0-alpha.4

Steps to reproduce

1. Programmatically change the url in a component: this.context.store.dispatch(push('/search?id=123'))
2. Hit your browser's back button

Expected Behavior

URL is updated and the correct route is displayed.

Actual Behavior

URL is updated, but stays on the current route.

Additional Info

I noticed that if I embed the routing within ConnectedRouter (like in the example) then it works as expected, ie:

ReactDOM.render(
  <Provider store={store}>
    { /* ConnectedRouter will use the store from Provider automatically */ }
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
        <Route path="/topics" component={Topics}/>
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
)

However, it causes a page refresh, which I don't want. This is how I have it set up:

ReactDOM.render(
	<Provider store={store}>
		<ConnectedRouter history={history}>
			<App />
		</ConnectedRouter>
	</Provider>,
	document.getElementById('root')
)

All the routing takes place in my App component. Not sure if that is what is causing the problem or not, or if I'm just missing something. I was previously using this.context.router.history.push() without any problems.

Edit

Just noticed that I need this code (specifically the router):

const mapStateToProps = (state) => ({
  counter: state.counter,
  router: state.router
})

If I delete router: state.router then programmatically changing the url doesn't update the route (but it does update the URL). I find this really odd because I am not using this.props.router anywhere in the code, yet mapping it to props is needed for the routing to work.

[zhipenglin]

I have also encountered this problem,I use the time in the redux devtool roaming function, found that the page will not jump,I guess and your problem is the same cause

[timdorr]

Read the blocked updates guide: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

[rokit]

Thanks, that was it. Fixed it by using withRouter:

import {withRouter} from 'react-router'
const NonBlockApp = withRouter(App)

ReactDOM.render(
	<Provider store={store}>
		<ConnectedRouter history={history}>
			<NonBlockApp />
		</ConnectedRouter>
	</Provider>,
	document.getElementById('root')
)