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

Navbar组件：

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

组件未使用react-router进行渲染

1 个答案: