React-router4 第四篇 Custom Link 自定义链接

直接贴代码

虽说我这么懒的人应该不会自定义标签，何必呢，，但是我还是看了官方的例子

直接抄过来，

exact 属性：根据我的测试，这个属性应该和路由的精确匹配有关有关，当值为true时，路由是会精确匹配的，当不写这个属性，或者值为false时，路由总会存在一个，即两个路由会并存

根据官方的例子，还学到一个知识点：

即：当路由未被匹配时，match的值为null，即match的值不会冲突，但是就是不知道嵌套路由会怎么样了。。

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const CustomLinkExample = () => (
  <Router>
    <div>
      <OldSchoolMenuLink activeOnlyWhenExact={true} to="/" label="Home"/>
      <OldSchoolMenuLink to="/about" label="About"/>
      <hr/>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </div>
  </Router>
)

const OldSchoolMenuLink = ({ label, to, activeOnlyWhenExact }) => (
  <Route path={to} exact={activeOnlyWhenExact} children={({ match }) => (
    <div className={match ? 'active' : ''}>
      {match ? '> ' : ''}<Link to={to}>{label}</Link>
      { console.log(match) // 值为object或者null }
    </div>
  )}/>
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

export default CustomLinkExample