[英]React-router cannot find components of other pages in the app
I am trying to set up a test component, which is basically a navigation bar and two components to navigate around. 我正在尝试设置一个测试组件,该组件基本上是一个导航栏和两个要浏览的组件。 This is what it looks like:
看起来是这样的:
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")
);
The navigation bar is just a generic bootstrap navbar which is appearing fine. 导航栏只是一个通用的引导导航栏,看起来不错。 The problem I am having is when I navigate (or click on the Page1 or Page2 buttons), I get the message:
我遇到的问题是导航(或单击Page1或Page2按钮)时,出现以下消息:
Cannot GET /page1
无法获取/ page1
Even though the components and the routing is all set up and linking itself also seems to be fine. 即使组件和路由都已设置好,并且链接自身似乎也很好。
I should also mention that the this.props.children is also null. 我还应该提到this.props.children也为null。
Any ideas on what I am doing wrong? 关于我在做什么错的任何想法吗?
Add path="/"
to the main App
Route. 将
path="/"
添加到主App
路由。 Also, you are rendering the App
component twice within your configuration. 此外,您还将在配置中两次渲染
App
组件。 Which won't work properly. 这将无法正常工作。 You should change it to:
您应该将其更改为:
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")
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.