Reagieren-Router verschachtelte Route funktioniert nicht

Question

Ich bin in React für ein paar Wochen Starter. und ich versuche mein eigenes Muster zu erstellen. Heute installiere ich react-router und ich habe ein Problem. Sie können meinen Routencode hier unten sehen.

<Router history={browserHistory}> 
    <Route path="/" component={Menubar}> 
     <IndexRoute component={App}/> 
     <Route path="another" component={Another} /> 
    </Route> 
</Router> 

Wenn ich das Web öffne. Es zeigt mir eine Menübar Komponenten aber nicht um mir App oder andere Komponenten zu zeigen. Wie kann ich dieses Problem

Sie beheben Vielen Dank für Hilfe.

Answer 1

Nested Routenkonzept:

IndexRouter: Wenn Sie ein Kind Route als Standard werden soll verwendet werden, wenn kein anderes Kind passt, verwenden Sie eine spezielle Route genannt. Wenn meine Eltern-Route übereinstimmt, aber keiner meiner Geschwister übereinstimmt, rende mich.

Nested Route:

<Router history={browserHistory}> 
    <Route path="/" component={Menubar}> 
    <IndexRoute component={App}/> 
    <Route path="another" component={Another} /> 
</Route> 

Komponenten werden in Übereinstimmung mit verschachtelt werden, wie der Router seine Routen nistet. Wenn der Benutzer das/besucht, werden die Menüleiste und die Standard-Kind-App gerendert. Wenn der Nutzer ein anderes besucht, werden die Menüleiste und ein anderes angezeigt.

{this.props.children}: Alles, was es bedeutet, ist "render mein Kind Komponenten hier", in der übergeordneten Komponente.

Verlauf: React Router ist mit Verlauf aufgebaut, ein Verlauf kann die Adressleiste des Browsers auf Änderungen überwachen und die URL in ein Standortobjekt analysieren, das der Router zum Abgleichen von Routen und zum Rendern der richtigen Komponenten verwenden kann.

browserHistory: die Schaffung eines echten URLs, die example.com/some/path aussehen

hashHistory: Hash Geschichte verwendet die Raute (#) Teil der URL, Erstellung von Routen, die wie example.com/#/some/path aussehen,

Nizza Artikel auf Router reagieren:

https://css-tricks.com/learning-react-router/

http://www.hackingwithreact.com/read/1/25/adding-a-root-route-using-react-router-and-indexroute