react-router 4.0（三）根據當前url顯示導航

import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
import {
  HashRouter,
  Route,
  Link,
  Redirect,
  withRouter
} from 'react-router-dom'

const Home = ({history}) => {

  return(
    <div>
      <h2>首頁</h2>
    </div>
  )
}

const One = ({history}) => {
  return(
    <div>
      <h2>第一頁</h2>
    </div>
  )
}

const Zlink = ({to,val,isexact}) => {

  return(
    <Route path={to} exact={isexact} children={({match})=>{
      console.log(match,to.toString())
      return(
        <div>
          {match ? '> ' : ''}<Link to={to}>{val}</Link>
        </div>
      )
    }}
    />
    // 當須要根據當前url來編輯導航時，可在Link外面包一個Route標籤
    // 經過children屬性下函數參數match可獲取當前url信息
  )
}

export default class App extends React.Component {
  constructor(props){
    super(props);       
  }
  render(){
    return(
      <HashRouter>
        <div>
          <ul>
            <Zlink to="/" val="首頁" isexact={true}/>
            <Zlink to="/one" val="第一頁" isexact={true}/>
          </ul>

          <Route exact path="/" component={Home}/>
          <Route  path="/one" component={One}/>

        </div>
      </HashRouter>
    )
  }
}

ReactDOM.render(<App/>,document.getElementById("app"))