use the render method of react-router-dom "s route tag, which cannot be rendered using this.props.children in the component

related environment react16

related codes

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 components

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;

results after running

in which the word "content" is rendered, but this.props.children does not render it, nor does it report an error