react in withRouter

Higher order components withRouter, the effect is wrapped into a component Routeinside, then react-routerthree objects history, location, matchwill be placed in the component propsproperties.

. 1  // withRouter implementation principle: 
2  // the assembly wrapped into Route, and then returns 
. 3  // const withRouter = () => { 
. 4  //      return () => { 
. 5  //          return <the Route Component} = {Nav / > 
6  //      } 
7  // } 
. 8  
. 9  // this is a simplified version 
10 const withRouter = (the Component) => () => <the Route the Component Component = {} />

The above is the realization of the principle,  react-router-dom which is the component directly introduced using it.

. 1 Import from React 'REACT'
 2 Import './nav.css'
 . 3  Import {
 . 4      NavLink,
 . 5      withRouter
 . 6 } from "Router-DOM-REACT"
 . 7  
. 8  class the extends React.Component {Nav
 . 9      the handleClick = () => {
 10          // three Route objects will be put to, the object of which method can be called 
. 11          the console.log ( the this .props);
 12 is      }
 13 is      the render () {
 14          return (
 15              <className = {div 'NAV '}>
 16                  <className = span {' logo '} onClick={the this .handleClick}> earthmoving community </ span>
 17                  <li> <NavLink to = "/" Exact> Home </ NavLink> </ li>
 18                  <li> <NavLink to = "/ Activities"> dynamic </ NavLink> </ li>
 19                  <li> <NavLink to = "/ topic"> topic </ NavLink> </ li>
 20                  <li> <NavLink to = "/ the Login"> Log </ NavLink> </ li>
 21 is              </ div>
 22 is          );
 23 is      }
 24  }
 25  
26 is  // derived is withRouter (Nav) function performs 
27 export default withRouter (Nav)

So withRouterthe effect is that if we are not a something Router, but we have to rely on it to jump a page, such as clicking the page logoand return home, you can use this time withRouterto do.
In this example, I will spanuse withRouteras a clickable jumpLink