reagiere router mit verschiedenen htmls

Question

Ich möchte Reverse Router verwenden, um verschiedene Routen zu behandeln, das Problem ist jede Route hat seine eigene HTML (Bootstap Grid-System betrachten, hat jede Seite ihr eigenes Layout) Ist es möglich, diffrent HTML-Skelett für zu laden diffrent Route und befestigen Sie Komponenten an entsprechenden Container? Eine alternative Lösung ist es, einen generischen HTML-Code zu haben und Grids in jeden Compnent einzufügen, aber diese Lösung verringert die Anzahl der Komponenten. Wie kann ich dieses Problem lösen?

Answer 1

In Ihrer Route-Konfiguration, machen Sie einfach jeden Pfad, den Sie haben wollen, mit Layout eine Root-Route. Alle Unterrouten erhalten das HTML-Skelett von der Basiskomponente.

modules.export = [ 
    <Route path="firstSkeleton" component={FirstSkeleton}/>, 
    <Route path="secondSkeleton"> 
     <Route path="home" component={SecondSkeleton}/> 
    </Route>, 
    ... 
    <Route /> 
] 

kann Jede der oben genannten Strecken haben es in der Wurzelkomponente, und dann werden die SubRoutes wird Übernahme von dort und erben definiert eigenes Layout ist.

Answer 2

Im Folgenden finden Sie ein generisches Beispiel für einen Blog mit einer Homepage im Stammverzeichnis Ihrer App ('/'). Es verwendet eine generische Layout Stammkomponente und nistet die HomePageLayout Komponente als Kind von Layout.

Wenn Sie navigieren zu '/blog', reagieren-Router die standardmäßig BlogListLayout Komponenten innerhalb der BlogLayout "Vorlage" erzeugt. Wenn Sie zu einem bestimmten Blog wie '/blog/some-user-blog' gehen, wird der BlogEntryLayout stattdessen rendern und es wird immer noch verschachtelt in der BlogLayout Vorlage.

Die '/about' Route ist ein Beispiel für eine einfache Seite ohne verschachtelte Kinder Komponenten, aber man kann sehen, wie leicht Sie SubRoutes IndexRoute und mehr Route Komponenten hinzufügen.

import ReactDOM from 'react-dom' 
import { Router, Route, IndexRoute, browserHistory } from 'react-router' 

ReactDOM.render(
    <Router history={browserHistory}> 
    <Route path='/' component={Layout}> 
     <IndexRoute component={HomePageLayout}/> 
     <Route path='/profile/*' component={ProfilePageLayout}/> 
    </Route> 

    <Route path='/blog' component={BlogLayout}> 
     <IndexRoute component={BlogListLayout}/> 
     <Route path='/*' component={BlogEntryLayout}/> 
    </Route> 

    <Route path='/about' component={AboutLayout}/> 
    </Router>, 
    document.getElementById('app') 
)