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

import React from 'react'const Layout = () =>(&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div>header</div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <ChildOne />&nbsp; &nbsp; &nbsp; &nbsp; {/*or*/}&nbsp; &nbsp; &nbsp; &nbsp; <Route path='/two' component={ChildTwo} />&nbsp; &nbsp; &nbsp; &nbsp; <div>footer</div>&nbsp; &nbsp; </div>)export default Layout

Answer 2

const Layout = (props) =>(&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div>header</div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; {props.children}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div>footer</div>&nbsp; &nbsp; </div>)<Router>&nbsp; &nbsp; <Layout>&nbsp; &nbsp; &nbsp; &nbsp; <Route path='/one' component={ChildOne}/>&nbsp; &nbsp; &nbsp; &nbsp; <Route path='/two' component={ChildTwo}/>&nbsp; &nbsp; </Layout></Router>