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