反應路由器找不到應用程序中的其他頁面的組件

Question

我想設置一個測試組件，它基本上是一個導航欄和兩個組件來瀏覽。這就是它的樣子：

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頁

即使組件和路由所有設置和鏈接本身似乎也沒有問題。

我還應該提到this.props.children也是null。

關於我在做什麼的錯誤？

Answer 1

將path="/"添加到主路線App。此外，您在配置中渲染了兩次App組件。哪個不能正常工作。您應該將其更改爲：

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") 
);