React-Router-Problem

Question

Ich habe ein paar Routen, aber meine Komponenten rendern nicht, wenn ich auf die Links klicke. Ich bekomme keine Fehler, die Komponenten, außer Navbar, rendern einfach nicht. BrowswerHistory liefert das gleiche Ergebnis. Ich benutze react-router 3.0.0 Version. Was ist falsch an meiner Router-Struktur?

import {Router, Route, IndexRoute, hashHistory} from 'react-router'; 

const router = (
    <Router history={hashHistory}> 
     <Route path="/" component={Navbar}> 
      <IndexRoute component={Main}></IndexRoute> 
      <Route path="other" component={Other}></Route> 
      <Route path="aboutus" component={AboutUs}></Route> 
     </Route> 
    </Router> 
    ); 


    ReactDOM.render(
    router, 
    document.getElementById('root') 
    ); 

Navbar Komponente:

import React from 'react'; 
import {Link} from 'react-router'; 
class Navbar extends React.Component { 
render() { 
return (
<nav> 
    <ul className="menu-list"> 
    <li className="menu-item"> 
     <Link to="/" className="menu-link">Main</Link> 
    </li> 
    <li className="menu-item"> 
     <Link to="aboutus" href="" className="menu-link">About Us</Link> 
    </li> 
    <li className="menu-item"> 
     <Link to="other" className="menu-link">Some other item</Link> 
    </li> 
    </ul> 
</nav> 
); 
} 
} 

export default Navbar; 

Answer 1

Da Sie diesen Teil vergessen: {this.props.children}. Sie müssen den Ort angeben, an dem Sie Ihre untergeordnete Komponente render möchten.

Grund, warum diese erforderlich: NavBar ist Hauptbestandteil, alle anderen Komponenten werden render innerhalb dieser, so dass Sie {this.props.children} verwenden müssen, an diesem Ort Kind Komponente render.

verwenden:

return (
    <nav> 
    <ul className="menu-list"> 

     <li className="menu-item"> 
     <Link to="/" className="menu-link">Main</Link> 
     </li> 

     <li className="menu-item"> 
     <Link to="aboutus" href="" className="menu-link">About Us</Link> 
     </li> 

     <li className="menu-item"> 
     <Link to="other" className="menu-link">Some other item</Link> 
     </li> 

    </ul> 
    {this.props.children} //added this line 
    </nav> 
);