javascript - React Router v4 Redirect not working

Question

I have a route which redirects after checking a condition like this

<Route exact path="/" render={()=>(
Store.isFirstTime ? <Redirect to="intro" /> : <Home state={Store}/>)}/>

The url changes when the condition is true but the component is not mounted. The rest of the component code is as below.

render() {
    return (
      <div>
        ...
        <Route exact path="/" render={()=>(
          Store.isFirstTime ? <Redirect to="intro" /> : <Home state={Store} />         
        )} />
        <Route path="/intro" render={()=>(<IntroWizard state={Store.userInfo}/>)} />
        <Route path="/home" render={()=>(<Home state={Store}/>)} />
        <Route render={()=>(<h1>404 Not Found</h1>)} />
        <Footer />
      </div>
    );
  }

My App Component is contained with in the BrowserRouter like thi

ReactDOM.render(<BrowserRouter>
    <App/>
</BrowserRouter>,
  document.getElementById('root')
);

when I hit the url directly in the browser like 'localhost:3000/intro' component is mounted successfully, but when it goes through the redirect it doesn't display the component. How do I fix it?

Edit

So one detail was missing and I tried creating another project to reproduce the issue. My App component is a observer from mobx-react and it is exported as shown below

let App = observer(class App { ... })
export default App

I have created this repo with a sample code to reproduce the issue you can use it https://github.com/mdanishs/mobxtest/

So when Components are wrapped into mobx-react observer the redirect is not working else it works fine

Answer 1

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))