Question

我想以下列方式配置React Router。如果匹配某个路由，则将用户重定向到另一个路由。 Documentation表示这是可能的，但没有提供实现这一目标的确切方法。有没有人对此有所了解？

DT2[, lapply(.SD, function(x) DT1[["y"]][match(x, DT1[["x"]])])]
#     x  x
# 1: 22 11
# 2: 22 33
# 3: 11 11
# 4: 11 22
# 5: 33 33
str(.Last.value)
# Classes ‘data.table’ and 'data.frame':    5 obs. of  2 variables:
#  $ x: num  22 22 11 11 33
#  $ x: num  11 33 11 22 33
#  - attr(*, ".internal.selfref")=<externalptr>

Answer 1

编辑 查看新的，不推荐的反应路由器语法的其他答案

如果在auth-flow example中使用onEnter挂钩，这是一个很好的例子。这是相关代码：

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组件已呈现。

Answer 2

由于反应路由器2.0.0，现在不推荐使用replaceState（状态，路径名，查询）。您现在必须使用替换（位置）和位置描述符。

https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors

从他们的指南：

// v1.0.x
(nextState, replaceState) => replaceState(null, '/foo')
(nextState, replaceState) => replaceState(null, '/foo', { the: 'query' })

// v2.0.0
(nextState, replace) => replace('/foo')
(nextState, replace) => replace({ pathname: '/foo', query: { the: 'query' } })

Answer 3

以下是使用react-router 2.0.0（使用replace代替replaceState）执行此操作的示例：

在 router.jsx ：

中

function requireAuth(nextState, replace) {
  if (!userExists()) {
    replace({
      pathname: '/signin',
      state: { nextPathname: nextState.location.pathname }
    })
  }
}

export const renderRoutes = () => (
  <Router history={browserHistory}>
      <Route path="protectedRoute" component={Protected} onEnter={requireAuth} />
      <Route path="signin" component={SignIn} />
    </Route>
  </Router>
);

然后，在SignIn组件内，您可以在成功登录后重定向：

import { browserHistory } from 'react-router';

signInFunction({params}, (err, res) => {
  // Now in the sign in callback
  if (err)
    alert("Please try again")
  else {
    const location = this.props.location
    if (location.state && location.state.nextPathname) {
      browserHistory.push(location.state.nextPathname)
    } else {
      browserHistory.push('/')
    }
  }
})

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

3 个答案: