routes - 如何使用React Router的重定向功能？

Question

我想按以下方式配置React Router。如果某条路线匹配，则用户将被重定向到另一条路线。 Documentation声明这是可能的，但没有提供实现这一目标的确切方法。有人对此有见解吗？

type EnterHook = (nextState: RouterState, replaceState: RedirectFunction, callback?: Function) => any;

type RedirectFunction = (state: ?LocationState, pathname: Pathname | Path, query: ?Query) => void;

Answer 1

编辑 查看新的、未弃用的 react 路由器语法的其他答案

<小时/>

有一个很好的示例说明如何使用 onEnter钩在 auth-flow example 。相关代码如下:

function requireAuth(nextState, replaceState) {
  if (!auth.loggedIn())
    replaceState({ nextPathname: nextState.location.pathname }, '/login')
}

render((
  <Router history={history}>
    <Route path="/" component={App}>
      <Route path="login" component={Login} />
      <Route path="logout" component={Logout} />
      <Route path="about" component={About} />
      <Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
    </Route>
  </Router>
), document.getElementById('example'))

如您所见，当 /dashboard访问路线requireAuth函数被调用。它接收两个参数:nextState ，这是 RouterState 表示用户即将进入的状态的对象，以及 replaceState ，一个 RedirectFunction 可以调用它来用其他东西替换该状态。在这种情况下，如果用户未登录，requireAuth来电 replaceState像这样:

replaceState({ nextPathname: nextState.location.pathname }, '/login')

第二个参数显然是用户将被重定向到的路径名。第一个参数是一个对象，它可以包含我们希望路由处理程序(在本例中为 Login 组件)拥有的任何数据。此处，用户尝试访问的路径名 ( /dashboard ) 设置为 nextPathname属性，以便在登录后用户可以重定向到该页面(请参阅 handleSubmit 组件中的 Login 方法)。

如果用户已登录，requireAuth什么也不做，因为 replaceState从未被称为路线照常工作，也就是说 Dashboard组件已渲染。