子供が無視されています

Question

ここでは、単純なビルドで私の道を見つけることを試みるリアクトルーターnoobです。私と一緒に抱きしめてください。

私は、ヘッダー、サイドバー、およびインデックスの3つのコンポーネントを持つアプリを持っています。

ブラウザでは、ヘッダーとサイドバーが正しくレンダリングされますが、インデックスコンポーネントは正しく表示されず、理由はわかりません。

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; 

だ...と私のアプリのコンポーネントが

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が指摘（ここでundefinedを返しますthis.props.children）I非推奨の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;