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