How to hide component instead of unmounting it?
react-router, reactjs
Solution
In order to achieve your requirement, you can not use two separate routes for `Foo` and `Bar`. You can set only one route for a container component(We name it `FooBar` here) . The `FooBar` combines `Foo` and `Bar`. Use the `state` of `FooBar` to change the visibility of the two components in the `FooBar`'s `render` function .
Problem
I have my routes defined like this: ``` <Route component={App}> <IndexRoute component={Main}/> <Route path="/foo" component={Foo}/> <Route path="/bar" component={Bar}/> </Route> ``` By default component gets unmounted when you transition from `Foo` to `Bar`. Since I have a computation-heavy code in the component `Foo` (Google Maps with custom animations) I would like to prevent unmount and hide this component instead, so when user goes back it will load instantly. How to achieve this?