#

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>

    );

  }

}

 

 

Mobile

.

0123movie.net