Question

我想配置react-router以等待Firebase在呈现任何路由之前登录（或注销）。

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

react-router是否包含一些处理此类案件的功能？

Answer 1

onEnter挂钩接受第三个参数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，有一个警告：

警告：在enter挂钩中使用回调会导致转换等待直到调用。如果您不能非常快速地调用它，这可能会导致无响应的用户界面。

Answer 2

我使用我的层次结构中的主要组件来修复它，以防止在发生某些事情之前呈现子项。

Here is the implementation.不是最优雅的代码，但是如果您像我一样绝望，它会起作用。

如何告诉react-router等到发生了什么事？

2 个答案: