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

我的路线定义如下：

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

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

怎么做到这一点？

为了满足您的要求,您不能为Foo和Bar使用两个单独的路线.您只能为容器组件设置一个路径(我们在此处将其命名为FooBar). FooBar结合了Foo和Bar.使用FooBar的状态来更改FooBar渲染功能中两个组件的可见性.