反応ルータネストされたルートは動作しません

Question

私は数週間リアクトのスターターです。私は自分の定型文を作成しようとします。今日私は反応ルータをインストールし、私は問題があります。私のルートはここでコードを見ることができます。

<Router history={browserHistory}> 
    <Route path="/" component={Menubar}> 
     <IndexRoute component={App}/> 
     <Route path="another" component={Another} /> 
    </Route> 
</Router> 

私はウェブを開くとき。その私はMenubarのコンポーネントを表示するが、Appや他のコンポーネントを表示することはできません。この問題を解決するにはどうすればいいですか？

ありがとうございました。

Answer 1

ネストされたルートの概念：

IndexRouter：他の子が一致しないときに、子ルートがデフォルトとして使用したい場合は、あなたが呼ばれる特別なルートを使用しています。私の親ルートが一致していても、私の兄弟のどれも一致しない場合は、私をレンダリングしてください。

ネストされたルート：

<Router history={browserHistory}> 
    <Route path="/" component={Menubar}> 
    <IndexRoute component={App}/> 
    <Route path="another" component={Another} /> 
</Route> 

コンポーネントは、ルータがそのルートをネストする方法に従ってネストされます。ユーザーが/にアクセスすると、Menubarとデフォルトの子Appがレンダリングされ、別のユーザーが訪れると、MenubarとAnotherがレンダリングされます。

{this.props.children}：これはつまり、親コンポーネントの内部に"私の子コンポーネントをレンダーする"という意味です。です。

履歴：React Routerは履歴とともに作成され、履歴はブラウザのアドレスバーで変更を監視する方法を知っており、URLをルートと一致させて正しいコンポーネントをレンダリングするために使用できるロケーションオブジェクトに解析します。

browserHistory：ハッシュ履歴はexample.com/#/some/pathのように見えるのルートを作成し、URLのハッシュ（＃）部分を使用して、

反応し、ルータ上のニースの記事：

example.com/some/path

hashHistoryのように見える実際のURLを作成します

https://css-tricks.com/learning-react-router/

http://www.hackingwithreact.com/read/1/25/adding-a-root-route-using-react-router-and-indexroute