withRouter

你可以 You can get access to the history object’s properties and the closest <Route>‘s match via the withRouter higher-order component. withRouter will re-render its component every time the route changes with the same props as <Route> render props: { match, location, history }.

  1. import React, { PropTypes } from 'react'
  2. import { withRouter } from 'react-router'
  4. // 一个可以展示当前地址路径名的简单组件
  5. class ShowTheLocation extends React.Component {
  6.   static propTypes = {
  7.     match: PropTypes.object.isRequired,
  8.     location: PropTypes.object.isRequired,
  9.     history: PropTypes.object.isRequired
  10.   }
  12.   render() {
  13.     const { match, location, history } = this.props
  15.     return (
  16.       <div>You are now at {location.pathname}</div>
  17.     )
  18.   }
  19. }
  21. // Create a new component that is "connected" (to borrow redux
  22. // terminology) to the router.
  23. const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

重要提醒

If you are using withRouter to prevent updates from being blocked by shouldComponentUpdate, it is important that withRouter wraps the component that implements shouldComponentUpate. For example, when using Redux: 如果你正在使用

  1. // This gets around shouldComponentUpdate
  2. withRouter(connect(...)(MyComponent)
  4. // This does not
  5. connect(...)(withRouter(MyComponent))

See this guide for more information.