react-router-dom示例讲解（四）——自定义链接

前言：

这个例子主要用到Route组件的三大render methods（render、component、children）之一children；有小编说children不同于component的作用是：有时候你可能只想知道访问地址是否被匹配，然后改变下别的东西，而不仅仅是对应的页面。我还不是很能体会到这句话的意思，不过这些不重要，你把它当成component或render完全可以理解。

效果如下：

代码如下：

class OldSchoolMenuLink extends Component{
  render() {
    return (
      <Route children={(props) => {
        return (
          <li>
            <Link to={this.props.path}>{this.props.label}</Link>
          </li>
        )
      }} />
    )
  }
}

class App extends Component{
  render() {
    return(
      <Router>
        <div>
          <ul>
            <OldSchoolMenuLink path="home" label="/Home"/>
            <OldSchoolMenuLink path="about" label="/About"/>
          </ul>
          <hr />
          <Route path="home" component={Home}/>
          <Route path="about" component={About}/>
        </div>
      </Router>
    )
  }
}

class Home extends Component{
  render() {
    return(
      <div>
        Home
      </div>
    )
  }
}

class About extends Component{
  render() {
    return(
      <div>
        About
      </div>
    )
  }
}

倘若你还不理解请参考我的github上的这个示例：https://github.com/guoqin721/react-router-dom4