反应路由器在应用程序中找不到其他页面的组件

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也是空的。

关于我做错了什么的任何想法？

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