2

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

我想为 React-Router 带来的 UI-Router-Extras 中更好的功能之一称为
Deep State Redirect。在此功能中，当导航到具有子路由的路由时，应用程序知道将用户重定向到它的最后一个访问过的子路由，或者如果它的子路由还没有被访问过，那么它会重定向到它的第一个子路由。挂号的。

例如，如果加载的路由树如下所示：

/main  
  |_/main_sub_1  
  |_/main_sub_2
/secondary

并且用户从 route 开始/main/main_sub_2，然后转到/secondary，然后转到/main，他们将被自动重定向到，/main/main_sub_2因为/main/main_sub_2这是最后一次/main访问的子路线。

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

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

4

1 回答 1

1

您最好的选择并且可能是最简单的解决方案是在顶级路线之一上设置onChange 挂钩。钩子将使用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(); 
}

如果回调被列为第四个参数，这个钩子将异步运行，并且转换将阻塞直到回调被调用。

编辑：请记住，这仅在您使用react-router的版本更新或等于react-router 2.1时才有效

于 2016-07-01T04:18:12.253 回答