Nesting Routes in React Router 4 (Tried wrapping routes in component)

Question

I am trying to wrap my routes so I can render something on every route, such as a header or any static content. I have looked at this post here: Nested Routes in React Router v4

I tried wrapping my routes like they have there, but now the only thing that shows is the wrapping component, none of the children show.

So the only thing that shows is on the / and /dashboard routes:

Home Component
Dashboard

Here is the code:

Wrapping routes:

    <Home>
      <Switch>
        <Route path="/dashboard" component={Layout} />
        <Route component={NotFound} />
      </Switch>
    </Home>

Home component:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Home extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h2>Home component</h2>
        <Link to="/dashboard">Dashboard</Link>
      </div>
    );
  }
}

export default Home;

Layout component:

import React, { Component } from 'react';


class Layout extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h2>Layout Component</h2>
        <h2>Layout Component</h2>
      </div>
    );
  }
}

export default Layout;

score 1 · Answer 1 · answered Dec 12 '17 at 17:53

1

Your layout needs a component, or instruction to know where to render the children.

Otherwise the router won't know where the children routes need to appear. The child component is passed to the layout as a property called children. You need to add this where you want it to appear:

  {props.children}

Like:

import React, { Component } from 'react';


class Layout extends Component {
  constructor(props) {
    super(props);
  }

  static propTypes = {
    children: PropTypes.node.isRequired,
  }

  render() {
    return (
      <div>
        <h2>Layout Component</h2>
        {props.children}
      </div>
    );
  }
}

export default Layout;

I personally prefer using . react router config But if you use the bare router that should do it.

answered Dec 12 '17 at 17:53

Dvid Silva

1,047
15
20

1

if you wouldn't mind could you show how how to do with react router config, I have used it in the past, also if I made Layout a functional component would I just pass props through and call `props.children`? `export default (props) => { return ( {props.children} ) }` – Taylor Austin Dec 12 '17 at 17:57
@TaylorAustin do you have a more specific question about the example you want, is kinda clear on their website, but if you need a proper example i can try and make one tonight. https://www.npmjs.com/package/react-router-config . Not sure what you mean by a functional component, I don't think I have done that in the past. – Dvid Silva Dec 13 '17 at 19:43

score 1 · Accepted Answer · answered Dec 12 '17 at 18:19

Have you tried putting {this.props.children} in your Home component?

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Home extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h2>Home component</h2>
        <Link to="/dashboard">Dashboard</Link>
        {this.props.children}
      </div>
    );
  }
}

export default Home;

Nesting Routes in React Router 4 (Tried wrapping routes in component)

2 Answers2