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