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