Route children being ignored

Question

React-Router noob here, trying to find my way around with a simple build. Please bear with me.

I have an app with three components: header, sidebar, and index.

In the browser, the header and the sidebar render properly, but the index component doesn't and I have no idea why. The console is throwing this warning:

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

It's just a warning but it is telling me that it's ignoring the child and I think that this is where it's breaking. Then again, what do I know? I'm new to all this.

Here's my root component.

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;

Here's the index component

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;

...and my app component (wherein this.props.children returns 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;

Which `react-router` version you are using. https://stackoverflow.com/questions/44452858/specify-child-routes-in-react-router-v4 — Pardeep Dhingra, Aug 16 '17 at 14:55
Please refer the link i have shared above. In react-router v4 we don't have IndexRoute. — Pardeep Dhingra, Aug 16 '17 at 14:57
Thanks for the link. That was exactly my problem. I'm following a lot of tutorials these days with legacy instructions and it's kind of messing me up. — Bryan White, Aug 16 '17 at 15:06

score 0 · Answer 1 · answered Aug 16 '17 at 15:11

Pointed out by Pardeep Dhingra above, I was attempting to use deprecated React Router components. Nesting routes inside child components is the way to go now.

Rather than structure my root component this way

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;

I should have done it like this:

//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;

And replace this.props.children in my app component with this

//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;

Route children being ignored

1 Answers1