React-Router：無限/動的ネスト

Question

概念の証明として、私は無限のナビゲーションをサポートするアプリケーションに取り組んでいます。つまり、各ページにはリンクのリスト（親からの小道具として渡されます）があり、後続の各ページに何も終了しないでクリックすることができます。

このようにすると、アプリケーションにさらに移動し続けると、mypage/a/b/c/d/e/f/g/...のようなURLになります。私が不明な点は、反応ルータで無限のルートを動的に生成する方法です。私は反応ルータを使用して、ルートを動的にロードすることができます。遅延ロードのアプローチですが、深くて深いルートを生成し続ける方法を理解することはできません。

私はいくつかのアイデアを持っていた：

• ストアReduxの内部にネストされたルーティング状態とダイナミックルーティング
• パターンと一緒に、私は「/**（未テスト）

Answer 1

のルートと一致していることを使用書かれたJsFiddle that demonstrates infinite nesting。それは、リアクタの代わりにNavigation routerを使用していますが、あなたはそれを公開していることを願っています。 Urlを手動で構築するのではなく、配列を渡してナビゲーションルーターにURLを構築させることがわかります。ハイパーリンクがクリックされるたびに、配列に新しい数値を追加してURLの長さを増やします。コードに関するご質問がありましたら、お知らせください。

// Pass an array for the parts parameter 
// Each item in the array represents a segment of the Url 
var Add = ({parts, stateNavigator}) => (
    <div> 
    <div>Url: {stateNavigator.stateContext.url}</div> 
    <div>Clicking Add increases the Url by one each time</div> 
    <NavigationReact.RefreshLink 
     navigationData={{parts: parts.concat(parts.length)}} 
     stateNavigator={stateNavigator}> 
     Add 
    </NavigationReact.RefreshLink> 
    </div> 
) 

// The * indicates the parts parameter is a splat 
// Splats can have infinite segments 
var stateNavigator = new Navigation.StateNavigator([ 
    {key:'infinite', route:'{*parts}', defaults: {parts: [0]}} 
]); 

// When the infinite state is navigated to render the Add component 
// Pass in the current parts data in the props 
stateNavigator.states.infinite.navigated = function(data) { 
    ReactDOM.render(
    <Add parts={data.parts} stateNavigator={stateNavigator} />, 
    document.getElementById('content') 
); 
} 

stateNavigator.start('/0');