React路由器和路由參數

Question

我已經瀏覽了，但找不到任何解決這個問題的東西。我的SPA中有一個路由需求問題。 URL中間有一個可選參數。例如，我想這兩者：

/username/something/overview 

和

/username/overview 

要解決同一件事。

第一次嘗試

我第一次嘗試使用括號標記這是一個可選的參數。

<Route path='/:username(/:shard)' component={ProfileContainer}> 
    <IndexRoute component={OverviewContainer} /> 
    <Route component={MatchHistoryContainer} path='/:username/(/:shard)/history' /> 
    <Route component={DailyTrendsContainer} path='/:username/(/:shard)/trends' /> 
</Route> 

然而，這樣做的結果是，username/history解析爲根，因爲它認爲的「歷史」是shard路由參數的值。所以username/something/overview與此合作，但username/overview不再有效。

嘗試2

我又運行它，通過在路由定義中定義了一整套新航線：

<Route path='/:username' component={ProfileContainer}> 
    <IndexRoute component={OverviewContainer} /> 
    <Route component={MatchHistoryContainer} path='/:username/history' /> 
    <Route component={DailyTrendsContainer} path='/:username/trends' /> 
    <Route path='/:username/:shard' component={ProfileContainer}> 
    <IndexRoute component={OverviewContainer} /> 
    <Route component={MatchHistoryContainer} path='/:username/:shard/history' /> 
    <Route component={DailyTrendsContainer} path='/:username/:shard/trends' /> 
    </Route> 
</Route> 

我把歷史和概述路線高於具有可選參數的參數，以便首先解析它們。然後我用參數聲明瞭額外的路由（但是這次沒有標記爲可選），所以它會解決那些嘗試過我想要的路由之後的路由。

用這種方法，歷史和概述工作了一種享受！但是，其中shard參數的網址不再有效，並導致循環，因爲每當它嘗試渲染時都失敗。

我想知道是否有一個成語或有一點點經驗的反應路由器的人可以指出我失蹤的東西明顯嗎？

Answer 1

是的，我們可以把可選params url中的中間，像這樣：

<Route path='/test' component={Home}> 
    <Route path='/test(/:name)/a' component={Child}/> 
</Route> 

不使用/test後，這將是可選的params回家。

在烏爾第一種情況只是刪除username的/後，它應該工作，試試這個：

<Route path='/:username(/:shard)' component={ProfileContainer}> 
    <IndexRoute component={OverviewContainer} /> 
    <Route component={MatchHistoryContainer} path='/:username(/:shard)/history' /> 
    <Route component={DailyTrendsContainer} path='/:username(/:shard)/trends' /> 
</Route>