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