被忽略的路由儿童

Question

React-Router noob在这里，试图找到我的方式与一个简单的构建。请多多包涵。

我有一个应用程序，包含三个组件：标题，侧栏和索引。

在浏览器中，标题和边栏呈现正常，但索引组件不，我不知道为什么。控制台抛出这样的警告：

Warning: You should not use <Route component> and <Route children> in the same route; 
<Route children> will be ignored 

这只是一个警告，但它告诉我，它忽略了孩子和我认为这就是它打破。然后再次，我知道什么？我对这一切都很陌生。

这是我的根组件。

import React, { Component } from 'react'; 
import { Router, Route, IndexRoute } from 'react-router'; 
import Index from './components/Index'; 

import App from './components/App'; 

class Root extends Component { 
    render() { 
    return (
     <Router history={this.props.history}> 
     <Route path='/' component={App}> 
      <IndexRoute component={Index}/> 
     </Route> 
     </Router> 
    ); 
    } 
} 

export default Root; 

这里的指数成份

import React, { Component } from 'react'; 

class IndexComponent extends Component { 

    constructor() { 
    super(); 
    } 
    render() { 
    return (
     <h2>Click on a contact to view their profile</h2> 
    ); 
    } 
} 

export default IndexComponent; 

...和我的应用程序组件（其中this.props.children返回undefined）

import 'normalize.css/normalize.css'; 
import 'bootstrap/dist/css/bootstrap.min.css'; 

import React, { Component } from 'react'; 
import Header from './Header'; 
import Sidebar from './Sidebar'; 
import { Grid, Row, Col } from 'react-bootstrap'; 

class AppComponent extends Component { 

    componentWillMount() { 
    this.lock = new Auth0Lock('XXXXXXXXXXXX', 'XXXXXX.auth0.com'); 
    } 

    render() { 
    return (
     <div> 
     <Header lock={this.lock}></Header> 
     <Grid> 
      <Row> 
      <Col xs={12} md={3}> 
       <Sidebar /> 
      </Col> 
      <Col xs={12} md={9}> 
       {this.props.children} 
      </Col> 
      </Row> 
     </Grid> 

     </div> 
    ); 
    } 
} 

export default AppComponent; 

Answer 1

通过Pardeep Dhingra指出了以上情况，我试图使用弃用的React Router组件。在子组件中嵌套路线是现在走的路。

而不是结构我的根组件这样

import React, { Component } from 'react'; 
import { Router, Route, IndexRoute } from 'react-router'; 
import Index from './components/Index'; 

import App from './components/App'; 

class Root extends Component { 
    render() { 
    return (
     <Router history={this.props.history}> 
     <Route path='/' component={App}> 
      <IndexRoute component={Index}/> 
     </Route> 
     </Router> 
    ); 
    } 
} 

export default Root; 

我应该做这样的：

//Root.js 

import React, { Component } from 'react'; 
import { Router, Route } from 'react-router'; 
import App from './components/App'; 

class Root extends Component { 
    render() { 
    return (
     <Router history={this.props.history}> 
     <Route path='/' component={App} /> 
     </Router> 
    ); 
    } 
} 

export default Root; 

而与此

取代this.props.children在我的应用程序组件

//App.js 

import 'normalize.css/normalize.css'; 
import 'bootstrap/dist/css/bootstrap.min.css'; 

import React, { Component } from 'react'; 
import { Route } from 'react-router'; 
import Header from './Header'; 
import Sidebar from './Sidebar'; 
import Index from './Index'; 
import { Grid, Row, Col } from 'react-bootstrap'; 

class AppComponent extends Component { 

    componentWillMount() { 
    this.lock = new Auth0Lock('XXXXXXXXXXXX', 'XXXXXX.auth0.com'); 
    } 

    render() { 
    return (
     <div> 
     <Header lock={this.lock}></Header> 
     <Grid> 
      <Row> 
      <Col xs={12} md={3}> 
       <Sidebar /> 
      </Col> 
      <Col xs={12} md={9}> 
       <Route path="/" component={ Index } /> 
      </Col> 
      </Row> 
     </Grid> 

     </div> 
    ); 
    } 
} 

export default AppComponent;