如何隐藏组件而不是卸载它？

Question

我的路线定义如下：

  <Route component={App}>
    <IndexRoute component={Main}/>
    <Route path="/foo" component={Foo}/>
    <Route path="/bar" component={Bar}/>
  </Route>

默认情况下，组件当您从过渡获得卸载Foo到Bar。由于我在组件Foo（带有自定义动画的谷歌地图）中有一个计算量很大的代码，我想阻止卸载和隐藏这个组件，所以当用户返回时它会立即加载。

如何实现这一目标？

Answer 1

为了实现您的要求，您不能对Foo和使用两个单独的路由Bar。你只能为一个容器组件设置一条路由（我们FooBar在这里命名）。结合FooBar了Foo和Bar。使用stateof可以更改s函数FooBar 中两个组件的可见性。FooBarrender