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

Question

我使用Cordova制作移动应用程序.使用react-router@2.0.0+ ReactCSSTransitionGroup来实现"卡片组"动画.我有一个严格的路由树,没有圆形链接的可能性.

为了提高性能并保存以前路由组件的状态,我想保留它们的整个历史记录只能在pop-state或replace-state上卸载.

怎么做？

Answer 1

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

在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) {
        ...
    }
}