保留react-router的路由组件以适用于所有历史状态。

Question

我使用 Cordova 制作移动应用程序。 使用 react-router@2.0.0 和 ReactCSSTransitionGroup 实现“卡片组”动画。 我有一个严格的路由树，没有循环链接的可能性。

为了提高性能并保存前一个路由组件的状态，我想在只弹出状态或替换状态时保留它们的整个历史记录。

如何做到这一点？

- KODerFunk

Answer 1

Ionic提供了IonRouterOutlet组件，以便在页面之间进行转换。虽然实现不是非常简单，但您可以查看他们的Repo。

他们所做的基本上是包装React的BrowserRouter并保持所有路由呈现-通过CSS切换它们的可见性。

请注意，这不是为了提高性能而是为了允许转换。它可能会阻碍性能而不是提高性能。例如，通过useEffect清理函数或componentWillUnmount()来清理资源。

- MarcRo

Answer 2

也许你可以在配置根路由时利用onEnter和onChange回调函数。在onEnter回调中，你可以记录初始路由路径，在onChange回调中，你可以比较当前/下一个路由路径，检查记录的路径历史，并记录路径。因此，由于每次路由更改时都可以检查和比较路由路径，所以可以阻止任何循环链接。

关于保存所有组件的状态，如果您使用redux，则整个应用程序状态可以保存在一个对象中，即redux存储库。

如果您想在离开之前保存组件的状态，可以在componentWillUnmount中分派一个save component state操作，并在componentWillMount中恢复状态。

以下是一个片段：

var rootRoute = {
    path: '/',
    onEnter: enter,
    onChange: change,
    component: MyApp,
    indexRoute: { component: Home },
    childRoutes: [
        LoginRoute,
        ...
        {path: 'home', component: Home},
        {
            path: '*',
            component: NotFound
        }
    ]
};

function enter (next) {
    // pathStore record all navigation history
    pathStore.record(next.location.pathname);
}
function change (cur, next, c) {
    // when hit cur path links in nav, pathname is same, key is different.
    if (cur.location.pathname !== next.location.pathname) {
        ...
    }
}

- cxxsn

Answer 3

你确定这样做会有帮助吗？如果我理解正确，你想要“缓存”组件，以便当你重新访问现有路由时，无需重新创建DOM结构（我认为Ionic有一个可以做到这一点的选项）。

我不确定你会得到多少好处，因为React使用虚拟DOM实现，应该已经以高效的方式更新了DOM。当你从一个路由转换到另一个路由时，只有最少的DOM节点会根据真实DOM和你的React表示之间的差异进行更改。

如果你想要“缓存”组件的状态，以便不必每次都重新计算它，那么使用像redux和reselect（https://github.com/reactjs/reselect）这样的东西会容易得多，只有在需要时才更新你给组件的数据，基本上将状态从你的组件中提取出来。然后你的状态就可以在组件卸载后保留下来。

Reselect使用函数记忆化来重新计算传递给组件的props，仅在需要时才这样做，而不是每次有变化时都这样做。

- fabio.sussetto

---

一个用例是保留滚动位置并执行反向转换以返回先前的精确状态（有许多隐含的隐藏状态，例如输入状态、滚动位置等等，这些状态不被React覆盖）。 - gre