リアクタのルータとネストされたルート

Question

以下の（本当に単純な）ルート構造の作成方法は混乱します。

私はログインコンポーネントのトップレベルのルートを持っているアプリがあります。

とアプリ自体の別のトップレベルのルート（のホーム・コンポーネントを呼びましょう）：

を

ホームコンポーネントには、ヘッダー、サイドバー、および子ビューのメインスペースがあります。

ログインコンポーネントは、/loginパスに表示する必要があります。それは十分簡単です。しかし、私が混乱しているのは、/のパスに、特定の子コンポーネントを持つホームコンポーネントを表示するようにしたいということです（これを「ようこそ」と呼びましょう）。また、私が考えることができる他のルートのほとんどは、子コンポーネントをホームコンポーネント内にレンダリングする必要があります。だから、

、繰り返しに：/は

パス/fooはそれ

内部Fooの成分とホームコンポーネントを描画することの内側にようこそコンポーネントとホームコンポーネントを描画する

パスを...

パス/loginは、ログインコンポーネントをレンダリングします

私は考えている構造が次のように感じます。

<Route path='/' component={App}> 
    <IndexRoute component={Home}> 
     <IndexRoute component={Welcome}> 
     <Route path='foo' component={Foo}/> 
    </IndexRoute> 
    <Route path='login' component={Login}/> 
    </Route> 

これは明らかに間違っています。このルーティング構造を実装する正しい方法は何でしょうか？

Answer 1

これはおそらく良い解決策です。試してみてください。

<Route component={App}> 
    <Route path="/" component={Home}> 
    <IndexRoute component={Welcome}/> 
    <Route path="/foo" component={Foo}/> 
    </Route> 
    <Route path="/login" component={Login}/> 
</Route>