2016-04-04 13 views
0

ich eine CoreLayout Komponente haben, die Basis-Layout-Elemente hat:ReactJS render Navigation basierend auf Kinder

1. Navigation bar 
2. Components container 
3. Footer 

In Navigationsleiste Ich habe eine Unternavigationsleiste, die unabhängig voneinander für jeden compoenent angezeigt würde - einige Komponenten könnten habe einige Aktionsknöpfe und einige überhaupt keine Aktionsknöpfe.

IndexView würde eine Aktion (Link) zu einer anderen Seite haben und ContactView würde die zusätzliche Navigationsleiste nicht anzeigen.

Router:

<Route component={CoreLayout}> 
    <Route path='/' component={LoginRequired}> 
     <IndexRoute component={IndexView}/> 
     <Route path='contact' component={ContactView}/> 
    </Route> 
    </Route> 

Wie machen wir Navigation unabhängig für jede Komponente, wenn die Navigation in CoreLayout Komponente ist?

Sollte ich Navigation und Subnavigation für jede Ansicht einzeln laden? zum Beispiel:

<Navigation><SubNavigation> list of links here </SubNavigation></Navigation> 

Antwort

1

Beide App-Strukturen arbeiten können: Ihre Navigationsleiste in Ihrer CoreLayout Root-Komponente, oder eine Navigationsleiste in jeder View-Komponente aufweist.

Aber ich denke in Ihrem Fall haben Sie lieber die Navigationsleiste in Ihrer Root-Komponente (CoreLayout), weil Sie möchten, dass diese Komponente das gemeinsame Layout der App definiert. Dazu können Sie in Ihrer CoreLayout-Komponente anhand des Router-Status (welche Ansicht gerade angezeigt wird) entscheiden, welche Links in Ihrer Navigationsleiste angezeigt werden sollen.

Verwandte Themen