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

Question

我的路线定义如下：

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

默认情况下，当您从Foo转换为Bar时，会卸载组件。由于我在组件Foo（带有自定义动画的Google地图）中有一个计算量很大的代码，我想阻止卸载并隐藏此组件，因此当用户返回时它会立即加载。

如何实现这一目标？

Answer 1

为了达到您的要求，您不能为Foo和Bar使用两个单独的路线。您只能为容器组件设置一个路径（我们在此处将其命名为FooBar）。 FooBar合并了Foo和Bar。使用state的{​​{1}}更改FooBar的{​​{1}}功能中两个组件的可见性。