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.