react router4 嵌套怎样实现？

Question

在vue中，可以通过<router-view />实现把子组件嵌套在父组件中的任意位置，但是在react中怎样实现呢？初学react，求指教！如下react代码Layout.jsimport React from 'react'const Layout = () =>(     <div>         <div>header</div>                  我想把子组件嵌套在这个位置                 <div>footer</div>     </div>)     export default LayoutChildOne.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 = () =>(

    <div>

        <div>header</div>

        

        <ChildOne />

        {/*or*/}

        <Route path='/two' component={ChildTwo} />

        <div>footer</div>

    </div>

)

export default Layout

Answer 2

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>