2016-08-30 34 views
1

我正在使用React,Redux和[email protected]。我試圖找出如何在特定查詢參數傳遞時裝入頂級組件。這可能嗎?react-router可能根據查詢參數裝載組件?

所以我現有的路線是這樣的:

export default (
    <Route name="root" path="/" component={RootComponent}> 
    <Route name="routeOne" path="a/route/:slug(/)" component={RouteOneComponent} /> 
    <Route name="routeTwo" path="a/route/:slug/:index" component={RouteTwoComponent} /> 
    </Route> 
); 

現在,我需要重構routeTwo使,而不是被安裝在a/route/slug/1,它僅僅將在a/route/slug?i=1

這是可能的嗎?我似乎無法在文檔中找到任何關於此的信息。似乎只有實際的路線可以有一個組件,而查詢作爲道具傳遞......但不幸的是,這不會爲我的用例工作。 :(任何想法?

回答

0

是的,你可以使用getComponent這個

<Route path="a/route/:slug" 
    getComponent={(nextState, cb) => { 
     if (nextState.location.query[i] === '1') { 
      cb(null, RouteTwoComponent); 
     } else { 
      cb(null, RouteOneComponent); 
     } 
    }} /> 

雖然我覺得一般人會在基於道具的渲染方法處理這些分歧。

+0

謝謝!這其實偉大工程因爲我的需要,但是我很想聽到更多關於你提到的「正常」方式(可能是爲了遵循最佳實踐),你介意說明一下嗎?當然我會將你標記爲正確的。 – Prefix