React-router問題

Question

我做了幾條路線，但是當我點擊鏈接時，我的組件沒有渲染。我沒有得到任何錯誤，除Navbar之外的組件，根本不渲染。 BrowswerHistory產生相同的結果。我正在使用react-router 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') 
    ); 

導航欄組件：

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

因爲你忘了這部分：{this.props.children}。你需要指定你想要的地方render你的孩子的組成部分。

之所以這樣要求：NavBar是主要成分，其他所有組件將render這裏面，所以你需要使用{this.props.children}，在這個地方的孩子組件將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> 
    {this.props.children} //added this line 
    </nav> 
);