React Router 4: Route Requisiten zu Layout-Komponente

Question

Ich versuche, die Route Requisiten zu einer Layout-Komponente, die erste API-Anfragen mit der Route Requisiten führt, das Problem ist, dass diese Route Requisiten nur an das Kind übergeben werden Routen.

<BrowserRouter> 
    <Switch> 
     <AppLayout> // This AppLayout performs API requests 
        // with the :route param in the child routes. 
      <Route path="/some/:route" component={SomeComponent} /> 
      <Route path="/some/other/:route" component={OtherComponent} /> 
     </AppLayout> 
    </Switch> 
</BrowserRouter> 

Offensichtlich, sobald der Benutzer trifft die /some/:route Strecke, das Layout worden wäre schon gemacht. Ich habe versucht, so etwas wie dies zu tun:

<BrowserRouter> 
    <Route path="/some/:route" render={(props) => 
     (<AppLayout {...props}><SomeComponent /></AppLayout>)} /> 
</BrowserRouter> 

Das funktioniert aber die AppLayout wäre abgemeldet und wieder montiert jedes Mal, wenn ich auf eine andere Strecke gehen, um das gleiche Layout.

Mit reagieren-Router 3, kann ich so etwas tun:

<Router history={browserHistory}> 
    <Route path="/" component={AppLayout}> 
     <Route path="/some/:route" component={SomeComponent} /> 
     <Route path="/some/other/:route" component={OtherComponent} /> 
    </Route> 
</Router> 

Und die Strecke Requisiten würden auf der AppLayout Komponente zur Verfügung stehen.

Gibt es eine Möglichkeit, dies tatsächlich mit react-Router 4 zu erreichen?

Answer 1

Da Sie nisten Routen wollen, sollten Sie etwas tun:

<BrowserRouter> 
    <Switch> 
     <Route exact path="/" render={props => <AppLayout {...this.props} />} /> 
     <Route exact path="/some/:route" component={AppLayout} /> 
     <Route exact path="/some/other/:route" component={AppLayout}/> 
    </Switch> 
</BrowserRouter> 

Beachten Sie, wie ich den Router Requisiten als Handler zu AppLayout und mit Hilfe der AppLayout Komponente am Übergang für beide Routen. Jetzt in der AppLayout Komponente Sie diese Routen wieder mit ihren jeweiligen Komponenten erwähnen, wie folgt aus:

<Switch> 
    <Route exact path="/some/:route" render={props => <SomeComponent {...this.props} />} /> 
    <Route exact path="/some/other/:route" render={props => <OtherComponent {...this.props} />} /> 
</Switch>