被忽略的路由兒童

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;