如何告訴react-router等到發生了什麼事情？

我想配置react-router以在呈現任何路線之前等待Firebase登錄（或註銷）。如何告訴react-router等到發生了什麼事情？

我見過react-router有onEnter()鉤，但似乎這是一個直接的回調，而我還沒有完全想通了，我怎麼會讓react-router等到火力觸發firebase.auth().onAuthStateChanged(...)事件。

react-router是否包含一些功能來處理這種情況？

來源

2016-07-15 Pier

這會對您的用戶產生意想不到的行爲，類似**模擬加載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警告：

注意：在回車中使用回調會導致轉換等待直到它被調用。如果你不快速調用它，這可能會導致無響應的用戶界面。

來源

2016-07-19 22:17:20

我在我的層次結構中使用了一個主要組件來修復它，以防止孩子被渲染，直到發生了某些事情。

Here is the implementation.不是最優雅的代碼，但它的作品的情況下，你是絕望，因爲我是。

來源

2016-07-16 01:14:38 Pier

如何告訴react-router等到發生了什麼事情？

回答

相關問題