How to hide component instead of unmounting it?

Question

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?

Answer 1

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 .