使用react-router-dom的route標(biāo)簽的render方法，組件里使用this.props.children渲染不出來

相關(guān)環(huán)境 react16

相關(guān)代碼

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'}} >
            內(nèi)容
            {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;

運行之后的結(jié)果

其中"內(nèi)容"兩個字渲染出來了，但是this.props.children沒有渲染出來，也沒有報錯