React路由器在更改路由时重新启动子项（不进行协调）

Question

我的情况是很少有路由由相同的组件组成，我想保留它的状态，但是这种行为很不可能。

实例（看看经过的秒数）： https://csb-43lp1km647-nkiinaibit.now.sh

CodeSandbox： https://codesandbox.io/s/43lp1km647

当然我可以在更改路线时保存和恢复计时器的状态，但我的应用程序有无限的CSS转换作为背景（不是在每条路线上）。

我正在尝试添加密钥，甚至是门户网站，但它仍会重新安装所有内容。

有没有办法强制执行典型的React reconciliation（仅重新安装必须重新安装的元素）？

更新： 刚发现<Switch />将呈现所有内容，直到找到匹配的元素，并且可能是某个<Route />或除<Fragment />内的任何元素。

代码：

<Router history={history}>
  <Switch>
    <Route path="/third" component={RouteWithoutTimer} />
    <React.Fragment>
      <Timer />
      <Route exact path="/" component={FirstRoute} />
      <Route path="/second" component={SecondRoute} />
    </React.Fragment>
  </Switch>
</Router>

或使用通配符路线：

<Router history={history}>
  <Switch>
    <Route path="/third" component={RouteWithoutTimer} />
    <React.Fragment>
      <Timer />
      <Switch>
        <Route exact path="/" component={FirstRoute} />
        <Route component={NotFoundRoute} />
      </Switch>
    </React.Fragment>
  </Switch>
</Router>

这不是我想要的解决方案，但它运作正常。

Answer 1

您正在每条路线中安装Timer的新实例 如果要跨路由共享组件，则应将其提升到路由的父组件：

<React.Fragment>
  <Timer />
  <Switch>
    <Route exact path="/" component={FirstRoute} />
    <Route path="/second" component={SecondRoute} />
  </Switch>
</React.Fragment>

Answer 2

这是州管理图书馆出现的地方。

在React中，状态是每个组件并且具有其拥有的组件的生命周期，因此当路由器破坏/重新安装组件时，您将丢失所有数据。我建议您尽快将您的州迁移到redux这样的州管理库。否则，如果这是一个中型应用程序，您的代码可能会变得混乱。