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按钮）时，我收到消息：

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

React-router无法在应用程序中找到其他页面的组件

1 个答案: