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>