React Router components getting unmount on route change

Question

I creating a SPA with React + Redux, where I am using react-route. I am facing one issue that whenever I am switching my routes like /about, /contact, /list.. each time components gets unmount.

So, I would need to know that is this a expected behavior or I am doing something wrong. Because in some component I am making an ajax call to get data and if component gets unmounted and user comes back again... it makes ajax call again even if data is already available in store.

<Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route path="about" component={About} />
    <Route path="/" component={HomePage} />
</Route>

Answer 1

Each time you navigate to a route the old component is removed, the new component is loaded and gets populated with the store values (with redux's connect).

The data will always be available in the store, so you dont need to fire new ajax requests when a component unload and reload again.

And, if you still want components to be available all the time, then you can use a single route and show and hide components from your main component using a navigation menu or tabs.. but depending on the number of components the DOM can get pretty heavy.