Pass this.props.children to another file in react-router

Question

I try to render a React Component in my page using react-router.

The file structure I use is the one bellow:

React/
  components/
    Container/
      Sidebar.js
      Main.js
    Container.js
    Header.js
    Layout.js
  pages/
    Main.js
    Lesson.js
  index.js

So I want to render the components from the pages folder in the component that belongs to Main.js. The Sidebar.js holds the navigation menu.

Here is what I tried:

index.js

import React from 'react';
import ReactDom from 'react-dom';

import Layout from './components/Layout';

import { Router, Route, IndexRoute, hashHistory } from 'react-router';

import Index from './pages/Index';
import Lesson from './pages/Lesson';

const app = document.getElementById('app');
ReactDom.render(
  <Router history={hashHistory} >
    <Route path="/" component={Layout} >
      <IndexRoute component={Index} ></IndexRoute>
      <Route path="lesson" name="lesson" component={Lesson} ></Route>
    </Route>
  </Router>
,app);

Layout.js

import React from 'react';

import Header from './Header';
import Container from './Container';

export default class Layout extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Container />
      </div>
    );
  }
}

Container.js

import React from 'react';

import Sidebar from './Container/Sidebar';
import Main from './Container/Main';

export default class Header extends React.Component {
  render() {
    return (
      <div id="container">
        <Sidebar />
        <Main />
      </div>
    );
  }
}

Main.js

import React from 'react';

export default class Main extends React.Component { render() { return ( {/* Here I want to render the contents */} ); } }

Sidebar.js

import React from 'react';
import { Link } from 'react-router';
import sidebarStore from './Sidebar/SidebarStore.js';


export default class Sidebar extends React.Component {
  render() {
    return (
      <div id="nav-md-placeholder">
        <nav id="sidebar">
          <ul id="main-menu">
            <li class="ripple-btn">
              <Link to="/">
                <span class="item-align-fix">
                  <i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}></i>
                  <strong>
                    <span>index</span>
                  </strong>
                </span>
              </Link>
            </li>
            <li class="ripple-btn">
              <Link to="lesson">
                <span class="item-align-fix">
                  <i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}></i>
                  <strong>
                    <span>lesson</span>
                  </strong>
                </span>
              </Link>
            </li>
          </ul>
        </nav>
      </div>
    );
  }
}

I don't get any errors on my console when building the app nor in th browser console. When I click on the links I redirect to the following urls but nothing happen:

Click on Index -> http://localhost/new-webclass/#/?_k=gukonu
Click on Lesson -> http://localhost/new-webclass/#/lesson?_k=7mcbcx

I don't know if I setted the routes with the wrong way. The official documentation doesn't help either.

Here is also the example of the Lesson.js I want to render:

import React from 'react';

export default class Lesson extends React.Component {
  render() {
    return (
      <h1>Lesson Page</h1>
    );
  }
}

Solution

See the answer of Random User bellow. He provides a nice explanation. So down bellow you see how I passed {this.props.children} to the file with the component I needed:

Layout.js

<Container main_content={this.props.children}/>

Container.js

<Main main_content={this.props.main_content}/>

Main.js

render() {
    return (
      <main class={this.MainContentPlaceholder} id="main-content-placeholder">
        <Overlay />
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center-col">
        {this.props.main_content}
        </div>
      </main>
    );

Dhruv Kumar Jha Dhruv Kumar Jha · Accepted Answer · 2016-09-16T17:35:19

In your index.js file

<Router history={hashHistory} >
  <Route path="/" component={Layout} >
    <IndexRoute component={Index} ></IndexRoute>
    <Route path="lesson" name="lesson" component={Lesson} ></Route>
  </Route>
</Router>

<Route path="/" component={Layout} > acts as the parent route and all other routes are its sub-routes. and its using Layout component

So even when you change the route, the parent component remains there and the component of new route is passed to the parent component Layout as a children, but you're not rendering children in your Layout component.

So, in your Layout.js file, add this line {this.props.children}, Example

return (
  <div>
    <Header />
    <Container />
    {this.props.children}
  </div>
);

You can Re-arrange it to suit your needs, but add {this.props.children} wherever you want to render the child components passed to it.

Edit

I think you're complicating things, Anyways you could do this

In Layout.js, You can pass the children to your container like

<Container>
  {this.props.children}
</Container>

And in Container.js pass the children using same technique

<Main>
  {this.props.children}
</Main>

And in Main.js

render() {
    return (
      <main className={this.MainContentPlaceholder} id="main-content-placeholder">
        <Overlay />
        <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 center-col">
          {this.props.children}
        </div>
      </main>
    );

Remember to use className prop instead of using class, In React JSX if you want to set class on an element you have to use className prop instead of class prop

Note: I think it would be best if you can place all the visual elements in your layout file, like Header, Navigation, Sidebar, Footer and then place this.props.children in a wrapper div, So the content within the wrapper will keep changing as you navigate between different routes., And you can update the header, navigation, aside, etc data, active states using your store.

Pass this.props.children to another file in react-router

Solution

1 Answers

Edit