React-routerはアプリケーション内の他のページのコンポーネントを見つけることができません

Question

基本的にナビゲーションバーとナビゲートする2つのコンポーネントであるテストコンポーネントを設定しようとしています。これは、次のようになります。

class Page1 extends Component{ 
    render(){ 
    return (<div>Page1</div>); 
    } 
} 

class Page2 extends Component{ 
    render(){ 
    return (<div>Page222</div>); 
    } 
} 

class App extends Component{ 
    render(){ 
     console.log('children: ', this.props.children); 
    return(
     <div> 
     <NavigationBar/> 

     {this.props.children} 
     </div> 

    ); 
    } 
} 

ReactDOM.render(
    <Router history={browserHistory}> 
    <Route component={App} > 
     <Route path="/" component={App}/> 
     <Route path="page1" component={Page1}/> 
     <Route path="page2" component={Page2}/> 
    </Route> 
</Router>, 
    document.getElementById("app") 
); 

ナビゲーションバーはちょうどよく表示される一般的なブートストラップナビバーです。私がナビゲート（またはページ1またはページ2のボタンをクリックした）ときに私が午前問題がある 、私はメッセージを取得：

は、コンポーネントとルーティングがあるにもかかわらず/ Page1の

を取得することはできませんすべてのセットアップとリンク自体もうまくいくようです。

this.props.childrenもnullであることにも言及する必要があります。

私が間違っていることに関するアイデアはありますか？

Answer 1

メインAppにpath="/"を追加します。また、構成内でAppコンポーネントを2回レンダリングしています。どちらが適切に動作しません。

class Page1 extends Component{ 
    render(){ 
    return (<div>Page1</div>); 
    } 
} 

class Page2 extends Component{ 
    render(){ 
    return (<div>Page222</div>); 
    } 
} 

class Home extends Component { 
    render(){ 
     return(<h1>I AM HOME</h1>); 
    } 
} 

class App extends Component{ 
    render(){ 
    console.log('children: ', this.props.children); 
    return(
     <div> 
     <NavigationBar/> 

     {this.props.children} 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <Router history={browserHistory}> 
     <Route path="/" component={App} > 
     <IndexRoute component={Home} /> //Being a different component 
     <Route path="page1" component={Page1}/> 
     <Route path="page2" component={Page2}/> 
     </Route> 
    </Router>, 
    document.getElementById("app") 
);