将this.props.children传递到react-router中的另一个文件

我尝试在我的页面中使用React -router来渲染一个React组件。

我使用的文件结构如下:

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

所以我想在属于Main.js的组件中呈现pages文件夹中的组件。Sidebar.js键保持导航菜单

这是我尝试的:

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

导出默认类Main扩展React。组件{呈现(){回报({/*这里我想渲染内容*/}）;}}

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>
    );
  }
}

当构建应用程序或在浏览器控制台时，我在控制台上没有得到任何错误。当我点击链接时，我重定向到以下url，但什么也没发生:

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

我不知道我是否把路线设置错了。官方文档也没有帮助。

这也是我想渲染的Lesson.js的例子:

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

见下面随机用户的答案。他提供了一个很好的解释。下面您可以看到我是如何将{this.props.children}传递到包含所需组件的文件的:

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