React Router v4 Redirect not working

The asker posted an issue on GitHub, and got this apparently unpublished hidden guide (edit: now published) that helped me out too. I'm posting it here because I ran into the same problem and want others to avoid our pain.

The problem is that mobx-react and react-redux both supply their own shouldComponentUpdate() functions that only check for prop changes, but react-router sends state down through the context. When the location changes, it doesn't change any props, so it doesn't trigger an update.

The way around this is to pass the location down as a prop. The above guide lists several ways to do that, but the easiest is to just wrap the container with the withRouter() higher order component:

export default withRouter(observer(MyComponent))

or, for redux:

export default withRouter(connect(mapStateToProps)(MyComponent))

You should render only Redirect in your render method:

render() {  return (<Redirect to="/" />);}

but here is my favorite solution without using the Redirect component

1. import import { withRouter } from 'react-router-dom';
   
2. export default withRouter(MyComponent);
3. Finally, in your action method, assume that handlingButtonClick

handlingButtonClick = () => {  this.props.history.push("/") //doing redirect here.}

<Redirect /> should not be inside <Switch></Switch> tags.