reactjs - 保留所有历史状态的 react 路由器路由组件

Question

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

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

怎么做？

Answer 1

也许您可以利用onEnter和onChange配置rootRoute时的回调。

在onEnter回调中可以记录初始的路由路径。在 onChange 回调中，您可以比较当前/下一个路线路径，检查记录的路径历史记录，并记录路径。因此，由于您可以在每次路线更改时检查和比较路线路径，因此您可以停止任何循环链接。

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

如果你想在离开之前保存组件当时的状态，你可以调度 save component state行动 componentWillUnmount ，并恢复 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) {
        ...
    }
}