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

导航栏只是一个通用的 bootstrap 导航栏，看起来不错。我遇到的问题是当我导航（或单击 Page1 或 Page2 按钮）时，我收到消息：

Cannot GET /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")
);

React-router 在应用中找不到其他页面的组件

React-router cannot find components of other pages in the app

javascript

reactjs

react-jsx

react-bootstrap

react-router