鍍金池/ 問答/HTML/ react router4 嵌套怎樣實(shí)現(xiàn)？

react router4 嵌套怎樣實(shí)現(xiàn)？

在vue中，可以通過<router-view />實(shí)現(xiàn)把子組件嵌套在父組件中的任意位置，但是在react中怎樣實(shí)現(xiàn)呢？初學(xué)react，求指教！

如下react代碼
Layout.js

import React from 'react'

const Layout = () =>(
    <div>
        <div>header</div>
        
        我想把子組件嵌套在這個(gè)位置
        
        <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>

路由這么寫，子組件只會(huì)放在Layout組件的最后面顯示。

回答
編輯回答
生性
import React from 'react'

const Layout = () =>(
    <div>
        <div>header</div>
        
        <ChildOne />
        {/*or*/}
        <Route path='/two' component={ChildTwo} />
        <div>footer</div>
    </div>
)
export default Layout
2017年3月9日 12:13
編輯回答
尛曖昧
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>
2018年7月15日 09:11