React-Router在應用程序中找不到其他頁面的組件

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

導航欄只是一個通用的引導導航欄，看起來不錯。 我遇到的問題是導航（或單擊Page1或Page2按鈕）時，出現以下消息：

無法獲取/ page1

即使組件和路由都已設置好，並且鏈接自身似乎也很好。

我還應該提到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")
);