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

Question

我最近一直在从 AngularJS + UI-Router+ UI-Router-Extras 到 React + React-Router.

UI-Router-Extras 中我想引入 React-Router 的一个更好的特性叫做
Deep State Redirect。在此功能中，当导航到具有子路径的路径时，应用程序知道将用户重定向到访问过的最后一个子路径，或者如果尚未访问其 none 个子路径，则它会重定向到第一个子路径子路径已被注册。

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

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

并且用户从路由 /main/main_sub_2 开始，然后转到 /secondary，然后转到 /main，他们将自动重定向到 /main/main_sub_2，因为 [=11] =] 是访问过的 /main 的最后一个子路径。

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

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

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(); 
}

If callback is listed as a 4th argument, this hook will run asynchronously, and the transition will block until callback is called.

编辑：请记住，如果您使用的 react-router 版本更新或等于 react-router 2.1[=，这将 仅工作 19=]

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

Automatic Deep Sub-Route Redirecting in React-Router

angularjs

reactjs

angular-ui-router

react-router

angular-ui-router-extras