How to implement react router4 nesting?

in vue , you can nest child components anywhere in the parent component through < router-view / > , but how do you do it in react? Beginner react, ask for advice!

the following react Code
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>

routing:

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

route is written so that the child components are only displayed at the end of the Layout component.

Apr.05,2021

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>

import React from 'react'

const Layout = () =>(
    <div>
        <div>header</div>
        
        <ChildOne />
        {/*or*/}
        <Route path='/two' component={ChildTwo} />
        <div>footer</div>
    </div>
)
export default Layout
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e48ec9-4c3fa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e48ec9-4c3fa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?