til/react/use-withrouter-to-pass-down-react-router-history.md

# Use withRouter To Pass Down React-Router History

A standard way to navigate with
[react-router](https://github.com/ReactTraining/react-router) besides using
the `Link` component is to call `history.push`. Components that are directly
rendered by a `Route` will have access to this and other router props. But
what about other components?

The `withRouter` HOC gives us direct access to a `history` prop.

```javascript
import React from 'react';
import { withRouter } from 'react-router';

const SpecialButton = withRouter(({ history, path, text }) => {
  return (
    <Button
      onClick={() => { history.push(path); }}
    >
      {text}
    </Button>
  )
});
```

This special button component is given the `history` prop via the
`withRouter` HOC along with any props that we directly pass it. With that
we are able to directly invoke a route change using `history.push()`.