Redux + react-router：路由攔截和redux

我正在使用Redux和react-router v3。Redux + react-router：路由攔截和redux

這是我的路由設置：

<Provider store={store}> 
    <Router history={ hashHistory }> 
    <Route path='/' component={ MainLayout }> 
     <IndexRedirect to='accounts' /> 
     <Route path='*' component={ Accounts } /> 
     <Route path='accounts' component={ Accounts } /> 
     <Route component={ SubLayout }> 
     <Route path='dashboard' component={ Dashboard }> 
      <IndexRedirect to='overview' /> 
      <Route path='overview' component={ Overview } /> 
      <Route path='scan' component={ Scan } /> 
     </Route> 
     </Route> 
    </Route> 
    </Router> 
</Provider>

這是我想要實現的邏輯：（給用戶跟隨路線 '/'）

1）MainLayout組件調度事件得到profileData。如果失敗，重定向到另一個地址

2）如果成功，重定向路由「賬戶」

3）應收組件進行調用以獲取帳戶數據。

上述工作，但給定路線爲'/ accounts'時出現問題： 1）MainLayout完成其任務並獲取配置文件數據，然後重定向至發出呼叫的帳戶。但是

2）路由器導航到帳戶也使它進行另一個電話。

有沒有更好的方法來做到這一點？我基本上想要重定向到帳戶頁面（如果沒有設置活動帳戶）（在商店的REDEX商店中）

來源

2017-01-05 Gilbert Nwaiwu

驗證您最需要的責任組件（即您的案例中的MainLayout）所需的所有內容，進行適當的更改到redux商店。

如果成功與否，您的孩子組件不應該再次進行該驗證，除非它是絕對必要的（就像一個不斷變化的值）。他們應該總是先檢查商店，因爲他們希望他們的父母爲他們做了這件事。

如果您需要重定向，因爲驗證的結果，你可以做你的兒女：

browserHistory.push('/some/path');

轉移將不會重新渲染父，至少不會像一般規則。 React已經知道它仍然必須使用新的路由進行渲染，因此它不會卸載它。

來源

2017-01-05 10:19:42 zurfyx

林不知道你明白我的問題是什麼。可以說我遵循路徑'/'。我的主要組件發送一個動作並且可以向帳戶路由發送.push。帳戶組件完成它的功能。但用戶可以輸入此路線'/ accounts'。現在與上面相同，但反應路由器導致帳戶組件再次構建 –

我想我明白你的意思，但我不確定這是什麼問題。我認爲我使用react-router的方式有問題。目前，如果我導航到'/ dashboard/overview'，我希望MainLayout只需一次調用即可獲取一些數據。它使兩個。而第二個的發起者被列爲'其他' –

我可以以某種方式向您顯示源代碼嗎？ –

Redux + react-router：路由攔截和redux

回答

相關問題