react router4 嵌套怎样实现？

Question

在vue中，可以通过<router-view />实现把子组件嵌套在父组件中的任意位置，但是在react中怎样实现呢？初学react，求指教！

如下react代码
Layout.js

import React from 'react'

const Layout = () =>(
    <div>
        <div>header</div>
        
        我想把子组件嵌套在这个位置
        
        <div>footer</div>
    </div>
)
export default Layout

ChildOne.js

...省略一部分
<div>子组件 1</div>

ChildTwo.js

...省略一部分
<div>子组件 2</div>

路由：

<Router>
    <Fragment>
        <Route  path='/' component={Layout}/>
        <Route path='/one' component={ChildOne}/>
        <Route path='/two' component={ChildTwo}/>
    </Fragment>
</Router>

路由这么写，子组件只会放在Layout组件的最后面显示。

Answer 1

const Layout = (props) =>(
    <div>
        <div>header</div>
        
        {props.children}
       
        <div>footer</div>
    </div>
)

<Router>
    <Layout>
        <Route path='/one' component={ChildOne}/>
        <Route path='/two' component={ChildTwo}/>
    </Layout>
</Router>

Answer 2

import React from 'react'

const Layout = () =>(
    <div>
        <div>header</div>
        
        <ChildOne />
        {/*or*/}
        <Route path='/two' component={ChildTwo} />
        <div>footer</div>
    </div>
)
export default Layout