ルータと経路のパラメタに反応します

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> 

しかし、これの結果は、それが「歴史」はshardルーティングパラメータの値であると考えているのでusername/historyは、ルートに解決されることです。したがって、username/something/overviewはこれで処理されましたが、username/overviewは機能しなくなりました。私は歴史と概要ルートを置く

<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> 

：

試み2

は、私は、ルーティング定義でルートの全体の新しいセットを定義することにより、それを別の実行を取りましたそれらが最初に解決されるように、オプションのパラメータを持つものの上に置きます。その後、パラメータを使って追加のルートを宣言しました（ただし、今回は省略可能とマークされていません）。このアプローチで

は、歴史と概要は御馳走を働きました！しかし、その中にshardというパラメータを持つURLは機能しなくなり、レンダリングしようとするたびに失敗したため、ループが発生しました。

私は、イディオムがあるか、リアクションルータのもう少し経験がある人が何か明白であることを指摘できるかどうか疑問に思っていました。

Answer 1

はい、私たちは、この方法のように、URLの途中で、オプションparamsを置くことができます。

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

は、それがホームのためのオプションのparamsなりますtest後/を使用しないでください。ウル第一の場合

はちょうどそれが動作するはずです、/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>