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> ); } }
|