reactjs - 如何告诉 react-router 等到有事情发生？

Question

我要配置react-router在渲染任何路由之前等待 Firebase 登录(或注销)。

我看过react-router有一个 onEnter()钩子(Hook)，但似乎这是一个立即回调，我还没有完全弄清楚我将如何制作 react-router等到 firebase 触发 firebase.auth().onAuthStateChanged(...)事件。

是否 react-router包括一些功能来处理这种情况？

Answer 1

onEnter hook 接受第三个参数 callback? ，如果指定将阻止加载路由，直到它被调用。

一个 example from the react-router repo :

function requireCredentials(nextState, replace, next) {
  const query = nextState.location.query
  if (query.qsparam) {
    serverAuth(query.qsparam)
    .then(
      () => next(),
      () => {
        replace('/error')
        next()
      }
    )
  } else {
    replace('/error')
    next()
  }
}

和渲染方法:

render((
  <Router history={withExampleBasename(browserHistory, __dirname)}>
    <Route path="/" component={App}>
      <IndexRoute component={Form} />
      <Route path="page" component={Page} onEnter={requireCredentials}/>
      <Route path="error" component={ErrorPage}/>
    </Route>
  </Router>
), document.getElementById('example'))

但是，对于长时间运行的操作有一个警告 in the documentation :

Caution: Using the callback in an enter hook causes the transition to wait until it is called. This can lead to a non-responsive UI if you don't call it very quickly.