缓存react-router路由

Question

我有以下代码：

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

如果用户单击列表项中的编辑按钮，react-router会将页面从/list更改为/list/{itemId}。这是新的一页。在用户填写了一些信息并单击保存后，react-router将更改回/list。现在重新呈现完整的/list-page！

有没有一种方法可以缓存页面，这样react就可以检测到更改并只重新呈现它们，而不是重新呈现整个页面？

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

我使用的是react-router-redux v5.0.0-alpha.9，所以解决方案应该与它兼容。它还应该与react-native和react-dom兼容。

Answer 1

如果您正在使用react-router

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

当路由不匹配时，组件将被卸载

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

隐藏而不是删除可以解决这个问题。

我已经用我的工具react-router-cache-route解决了这个问题

用法

用<CacheRoute>替换<Route>

用<CacheSwitch>替换<Switch>

如果您想要用于React的真正<KeepAlive />

我有我的实现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属性，并将它们呈现到不会被卸载的组件中。

Answer 2

最近遇到了同样的问题，我最初的想法是使用类似react-router-cache-route或其他包的东西。

但第三方软件包的主要缺点是，它们支持新的react-router版本的速度通常很慢，而且在我看来，源代码对于这个问题来说过于复杂。

所以我做了进一步的研究，偶然发现了丹·阿布拉莫夫的this suggestion，最终得到了这样的解决方案：

function App() {
  const itemId = useParams<{ itemId: string }>();

  return (
    <Switch>
       ...
       <Route
          exact
          path={['some-list-route', 'some-list-route/:itemId']}
       >
          <List style={itemId ? { display: 'none' } : undefined} />
          {itemId && <ListItem />}
       </Route>
       ...
    </Switch>
  )
}

我们将list和item路由都放在单个路由组件下，以控制它们的安装行为。当我们获得item路由时-我们隐藏我们的<List /> (但它保持挂载，“保持活动”)，并有条件地挂载<ListItem />。

如果我们需要更多的控制，我们也可以将itemId作为一个属性传递给<List />，比如有条件地触发仅用于list路由的数据获取。