React-router 문제

Question

몇 개의 경로를 만들었지 만 링크를 클릭하면 구성 요소가 렌더링되지 않습니다. 어떤 오류도 발생하지 않습니다. Navbar를 제외한 구성 요소는 단순히 렌더링하지 않습니다. BrowswerHistory는 동일한 결과를 산출합니다. 나는 반응 라우터 3.0.0 버전을 사용하고 있습니다. 라우터 구조에 어떤 문제가 있습니까?

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의 구성 요소 : {this.props.children} :

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

당신이이 부분을 잊었 때문입니다. 자녀 구성 요소 인 render으로 지정할 위치를 지정해야합니다.

이이 필요한 이유

이유 : NavBar 주요 구성 요소입니다, 다른 모든 구성 요소를이 내부 것이다 render,이 장소의 아이 컴퍼넌트 것이다 render에서 {this.props.children}를 사용할 필요가 있도록.

사용이 : 또 다른 시간을 나를 돕는

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> 
);