Question

我最近将项目从 AngularJS + UI-Router + UI-Router-Extras 转换为 React + React-Router 。

我想带到React-Router的UI-Router-Extras中的一个更好的功能称为
Deep State Redirect。在此功能中，当导航到具有子路由的路由时，应用程序知道将用户重定向到访问过的最后一个子路由，或者如果尚未访问其子路由，则重定向到其第一个子路由注册

例如，如果加载的路由树看起来像这样：

[3]

并且用户从路由/main |_/main_sub_1 |_/main_sub_2 /secondary开始，然后转到/main/main_sub_2，然后转到/secondary，自/main后，它们将自动重定向到/main/main_sub_2是/main/main_sub_2访问过的最后一个子路径。

我知道我可以通过使用
在反应路由器中实现这一点 /main其中<IndexRedirect to={getLastSubRoute(parentRoute)}>是父parentRoute标记的完整路径，而<Route>是自我解释的，但问题是我需要添加这样的getLastSubRoute标记到我创建的每一条路由，这不是最优的，因为路由是动态加载的，最多可能有100个子路由，而且应用程序的大部分路由都是由其他人编写的，我不应该依赖于记住在他们写的每个<IndexRedirect>标记下添加该标记。

理想情况下，我应该能够将一些函数或mixin应用于React路由定义中的基本<Route>标记，以将此功能添加到其下的所有路由，但我不知道从哪里开始。我该如何解决这个问题？

Answer 1

您最好的选择可能是最简单的解决方案是在其中一条顶级路线上设置onChange hook。使用next参数调用钩子，这将是用户将要去的下一个路径。

你也可以在那里有路由的层次结构（导航到父节点的父节点和子节点），因此你可以使用replace函数动态重定向，它也作为参数传入。

我为权限和角色管理实现了类似的功能。我还做了.bind我的商店到我传递到路线钩子的功能。您可以在状态树中存储您要重定向到用户的路由。基本上你称之为getLastSubRoute。

...
<Route onChange={myRedirectFunctionThatHasStoreBound} .. >
   ... // other routes
</Route>
...


function myRedirectFunctionThatHasStoreBound(store, prev, next, replace, callback) {
    const user = store.getState().user;
    const redirectTo = getLastSubRouteForRoute(user, next);

    if (redirectTo) {
        replace(redirectTo);
    }

    // don't forget this is you list callback as a param
    // your app might stop working, explanation below
    callback(); 
}

如果将回调列为第4个参数，则此挂钩将异步运行，转换将阻塞，直到调用回调为止。

编辑：请注意，如果您使用的react-router版本高于或等于版本react-router 2.1

，则仅适用 >

React-Router中的自动深度子路由重定向

1 个答案: