缓存反应路由器路由

Question

我有以下代码：

<View>
  <Header />
  <List />
</View>

如果用户点击列表项中的修改按钮，则react-router会将网页从/list更改为/list/{itemId}。这是一个新页面。在用户填写了一些信息并点击了保存后，react-router会更改回/list。现在完整的/list - 页面被重新渲染！

有没有办法缓存网页，因此react可以检测到更改并仅重新呈现它们而不是重新呈现整页？

还应该可以直接呈现页面（而不是/list - > /list/{itemId}），所以我认为没有modal解决方案。

我正在使用react-router-redux v5.0.0-alpha.9，因此解决方案应与之兼容。它还应与react-native和react-dom兼容。

Answer 1

如果您正在使用react-router

前进或后退时无法缓存组件，这会导致在使用Route时丢失数据和互动

如果路线不匹配，则组件将被卸载

阅读Route的源代码后，我们发现使用child prop作为函数可以帮助控制渲染行为。

隐藏而不是删除将解决此问题。

我已经使用工具react-router-cache-route

对其进行了修复

用法

将<Route>替换为<CacheRoute>

将<Switch>替换为<CacheSwitch>

---

如果您想为<KeepAlive />使用真实的React

我有自己的实现react-activation

Online Demo

用法

import KeepAlive, { AliveScope } from 'react-activation'

function App() {
  const [show, setShow] = useState(true)

  return (
    <AliveScope>
      <button onClick={() => setShow(show => !show)}>Toggle</button>
      {show && (
        <KeepAlive>
          <Test />
        </KeepAlive>
      )}
    </AliveScope>
  )
}

实现原理很容易说。

由于React将卸载内部组件层次结构中的组件，因此我们需要提取<KeepAlive>中的组件，即它们的children道具，并将其渲染为组件那将不会被卸载。