React: Layout Children
Wie wird au seiner URL Route verschiedene Componenten
oder Pages geladen?
App.js->Layout
In der App.js wird die Componente <Layout> eingebettet
mit <Route..> Elementen in der Mitte.
Auflösung in
Layouts -> NavMenu und Components
Layout.ts mit Aufteilung NavMenu und aus
this.props.children->wird die component={Shoppinglist} übernommen
Code
App.ts ->Layout with Routing Children
|
return (
<Layout>
<div>test</div>
<Route exact path='/' component={Home} />
<Route path='/counter' component={Counter} />
<Route path='/shoppinglist' component={Shoppinglist} />
<AuthorizeRoute path='/fetch-data' component={FetchData} />
<Route path={ApplicationPaths.ApiAuthorizationPrefix} component={ApiAuthorizationRoutes} />
</Layout>
);
|
Layout.ts mit Components
Layout.ts mit Aufteilung NavMenu und aus
this.props.children->wird die component={Shoppinglist} übernommen
|
export class Layout extends Component {
static displayName = Layout.name;
render () {
return (
<div>
<NavMenu />
<Container>
{this.props.children}
</Container>
</div>
);
}
}
|