react router this.props.children渲染问题

Question

使用react-router-dom的route标签的render方法，组件里使用this.props.children渲染不出来

相关环境 react16

相关代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

app.js

import React, { Component } from 'react';
import MyLayout from './components/Layout/Layout';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import 'antd/dist/antd.css';

import Login from './page/Login/Login';
import Home from './page/Home/Home';
import ArticleList from './page/ArticleList/ArticleList';
import NewArticle from './page/NewArticle/NewArticle';


class App extends Component {
  render() {
    let LayoutRouter = (
      <MyLayout>
        <Switch>
          <Route exact path="/" Component={Home} />
          <Route path="/article/list" Component={ArticleList} />
          <Route path="/article/new" Component={NewArticle} />
        </Switch>
      </MyLayout>
    );
    return (
      <Router>
        <Switch>
          <Route path="/login" Component={Login} />
          <Route path="/" render={ props => LayoutRouter } />
        </Switch>
      </Router>
    )
  }
};

export default App;

MyLayout组件

import React, { Component } from 'react';
import { Layout } from 'antd';
import SideNav from '../SideNav/SideNav';
import TopNav from '../TopNav/TopNav';

const { Content } = Layout;

class MyLayout extends Component {
  render() {
    console.log(this.props.children);
    return (
      <Layout className="myLayout">
        <SideNav />
        <Layout>
          <TopNav />
          <Content style={{margin: '0 16px'}} >
            内容
            {this.props.children}
          </Content>
        </Layout>
      </Layout>
    )
  }
}

export default MyLayout;

Home.js

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return <div>首页</div>
  }
}

export default Home;

运行之后的结果

其中"内容"两个字渲染出来了，但是this.props.children没有渲染出来，也没有报错

Answer 1

你Route上的component应该小写吧？
嵌套路由也用component，代码如下：

<Router>
    <Switch>
      <Route exact path="/" component={LayoutRouter} />
    </Switch>
</Router>

const LayoutRouter = (props) => {
      return (
        <MyLayout>
          <Router history={props.history}>
            <Switch>
              <Route path="/" component={Home} />
            </Switch>
          </Router>
        </MyLayout>
      )
    }