react-router 4.0根据当前url显示导航

Posted 2020-12-03 blogregisterboby

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