React-router 在应用中找不到其他页面的组件 [英] React-router cannot find components of other pages in the app

问题描述

我正在尝试设置一个测试组件，它基本上是一个导航栏和两个用于导航的组件.这是它的样子:

class Page1 扩展组件{使成为(){返回 (
Page1
);}}类 Page2 扩展组件{使成为(){返回 (
Page222
);}}类 App 扩展组件{使成为(){console.log('children: ', this.props.children);返回(<div><导航栏/>{this.props.children}

);}}ReactDOM.render(<路由器历史={browserHistory}><路由组件={App} ><Route path="/" component={App}/><Route path="page1" component={Page1}/><Route path="page2" component={Page2}/></路线></路由器>,document.getElementById("app"));

导航栏只是一个通用的引导导航栏，看起来不错.我遇到的问题是当我导航(或单击 Page1 或 Page2 按钮)时，我收到消息:

<块引用>

无法获取/page1

即使组件和路由都设置好了，链接本身似乎也很好.

我还应该提到 this.props.children 也是空的.

对我做错了什么有任何想法吗?

解决方案

将 path="/" 添加到主 App Route.此外，您在配置中两次呈现 App 组件.这将无法正常工作.您应该将其更改为:

class Page1 扩展组件{使成为(){返回 (
Page1
);}}类 Page2 扩展组件{使成为(){返回 (
Page222
);}}类 Home 扩展组件 {使成为(){return(<h1>我在家</h1>);}}类 App 扩展组件{使成为(){console.log('children: ', this.props.children);返回(<div><导航栏/>{this.props.children}

);}}ReactDOM.render(<路由器历史={browserHistory}><Route path="/" component={App} ><IndexRoute 组件={Home}/>//作为一个不同的组件<Route path="page1" component={Page1}/><Route path="page2" component={Page2}/></路线></路由器>,document.getElementById("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:

Cannot GET /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.

Any ideas on what I am doing wrong?

解决方案

Add path="/" to the main App Route. Also, you are rendering the App component twice within your configuration. 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")
);

这篇关于React-router 在应用中找不到其他页面的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！