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

问题描述：

我想配置react-router以在呈现任何路线之前等待Firebase登录（或注销）。如何告诉react-router等到发生了什么事情？

我见过react-router有onEnter()钩，但似乎这是一个直接的回调，而我还没有完全想通了，我怎么会让react-router等到火力触发firebase.auth().onAuthStateChanged(...)事件。

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

这会对您的用户产生意想不到的行为，类似**模拟加载SSR页面**，用户必须等到响应返回并显示页面。IMO才会更容易在异步操作发生时显示**加载指示符** – webdeb

问题未显示指示符，但是如何告诉路由器等待认证事件 – Pier

请定义您对用户的期望，它应该如何显示像，我想有没有办法让反应路由器等待什么..这是一种模式，这是不是很常见，也许我错了，请提供一些例子 – webdeb

答

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警告：

注意：在回车中使用回调会导致转换等待直到它被调用。如果你不快速调用它，这可能会导致无响应的用户界面。

答

我在我的层次结构中使用了一个主要组件来修复它，以防止孩子被渲染，直到发生了某些事情。

Here is the implementation.不是最优雅的代码，但它的作品的情况下，你是绝望，因为我是。

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

相关推荐