Reactjs 为所有历史状态保留react路由器路由组件

我用Cordova制作了一个移动应用程序。使用

react-router@2.0.0

+

reactcstransitiongroup

实现“卡片组”动画。我有一个严格的路线树没有循环链接的可能性

为了提高性能并保存以前路由组件的状态，我希望保留它们的全部历史记录，仅在pop状态或替换状态下卸载

---

怎么做？

你确定这确实有用吗？如果我明白你的意思，你会希望“缓存”组件，这样当你重新访问一个现有的路由时，就不需要重新创建DOM结构了（我认为爱奥尼亚有一个选项可以做到这一点）

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

如果您想“缓存”组件的状态，这样就不必每次都重新计算它，那么使用

redux

和

reselect

（）之类的方法来更新您仅在需要时提供给组件的数据会容易得多，基本上完成了从组件中提取状态的过程。您的状态将在卸载组件后继续存在

---

“重新选择”使用函数记忆功能，仅在需要时才重新计算传递给组件的道具，而不是每次发生更改时重新计算道具。

也许您可以在配置rootRoute时利用和回调

在OneNet回调中，您可以记录初始路由路径。在onChange回调中，您可以比较cur/next路由路径、检查记录的路径历史记录和记录路径。因此，由于可以在每次路由更改时检查和比较路由路径，所以可以停止任何循环链接

关于保存所有组件的状态，如果使用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) {
        ...
    }
}

---

一个用例是保留滚动位置，并进行反向转换以返回到之前的精确状态（有许多隐式隐藏状态，如输入状态、滚动位置等，React未涵盖）