CODEWITHSUNDEEP
reactjsreact-router
Kertis van Kertis
Kertis van Kertis

Reputation: 741

How to hide component instead of unmounting it?

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?

Upvotes: 8

Views: 1523

Answers (1)

Jason Xu
Jason Xu

Reputation: 885

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 .

Upvotes: 4

Related Questions