title: Pass this.props.children to another file in react-router
body: <p>I try to render a React Component in my page using react-router.</p>
  
  <p>The file structure I use is the one bellow:</p>
  
  <pre><code>React/
    components/
      Container/
        Sidebar.js
        Main.js
      Container.js
      Header.js
      Layout.js
    pages/
      Main.js
      Lesson.js
    index.js
  </code></pre>
  
  <p>So I want to render the components from the <code>pages</code> folder in the component that belongs to <code>Main.js</code>. The <code>Sidebar.js</code> holds the navigation menu.</p>
  
  <p>Here is what I tried:</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>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(
    &lt;Router history={hashHistory} &gt;
      &lt;Route path="/" component={Layout} &gt;
        &lt;IndexRoute component={Index} &gt;&lt;/IndexRoute&gt;
        &lt;Route path="lesson" name="lesson" component={Lesson} &gt;&lt;/Route&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
  ,app);
  </code></pre>
  
  <p><strong>Layout.js</strong></p>
  
  <pre><code>import React from 'react';
  
  import Header from './Header';
  import Container from './Container';
  
  export default class Layout extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Header /&gt;
          &lt;Container /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Container.js</strong></p>
  
  <pre><code>import React from 'react';
  
  import Sidebar from './Container/Sidebar';
  import Main from './Container/Main';
  
  export default class Header extends React.Component {
    render() {
      return (
        &lt;div id="container"&gt;
          &lt;Sidebar /&gt;
          &lt;Main /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Main.js</strong></p>
  
  <p>import React from 'react';</p>
  
  <p>export default class Main extends React.Component {
    render() {
      return (
        
          
           {/* Here I want to render the contents */}
          
        
      );
    }
  }</p>
  
  <p><strong>Sidebar.js</strong></p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router';
  import sidebarStore from './Sidebar/SidebarStore.js';
  
  
  export default class Sidebar extends React.Component {
    render() {
      return (
        &lt;div id="nav-md-placeholder"&gt;
          &lt;nav id="sidebar"&gt;
            &lt;ul id="main-menu"&gt;
              &lt;li class="ripple-btn"&gt;
                &lt;Link to="/"&gt;
                  &lt;span class="item-align-fix"&gt;
                    &lt;i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}&gt;&lt;/i&gt;
                    &lt;strong&gt;
                      &lt;span&gt;index&lt;/span&gt;
                    &lt;/strong&gt;
                  &lt;/span&gt;
                &lt;/Link&gt;
              &lt;/li&gt;
              &lt;li class="ripple-btn"&gt;
                &lt;Link to="lesson"&gt;
                  &lt;span class="item-align-fix"&gt;
                    &lt;i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}&gt;&lt;/i&gt;
                    &lt;strong&gt;
                      &lt;span&gt;lesson&lt;/span&gt;
                    &lt;/strong&gt;
                  &lt;/span&gt;
                &lt;/Link&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>Click on Index -&gt; http://localhost/new-webclass/#/?_k=gukonu
  Click on Lesson -&gt; http://localhost/new-webclass/#/lesson?_k=7mcbcx
  </code></pre>
  
  <p>I don't know if I setted the routes with the wrong way. The official documentation doesn't help either.</p>
  
  <p>Here is also the example of the <strong>Lesson.js</strong> I want to render:</p>
  
  <pre><code>import React from 'react';
  
  export default class Lesson extends React.Component {
    render() {
      return (
        &lt;h1&gt;Lesson Page&lt;/h1&gt;
      );
    }
  }
  </code></pre>
  
  <h2>Solution</h2>
  
  <p>See the answer of <strong>Random User</strong> bellow. He provides a nice explanation. So down bellow you see how I passed <code>{this.props.children}</code> to the file with the component I needed:</p>
  
  <p><strong>Layout.js</strong></p>
  
  <pre><code>&lt;Container main_content={this.props.children}/&gt;
  </code></pre>
  
  <p><strong>Container.js</strong></p>
  
  <pre><code>&lt;Main main_content={this.props.main_content}/&gt;
  </code></pre>
  
  <p><strong>Main.js</strong></p>
  
  <pre><code>render() {
      return (
        &lt;main class={this.MainContentPlaceholder} id="main-content-placeholder"&gt;
          &lt;Overlay /&gt;
          &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center-col"&gt;
          {this.props.main_content}
          &lt;/div&gt;
        &lt;/main&gt;
      );
  </code></pre>