How to access history object outside in React Router v4

Question

I have this following code:

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'


const Routes = () => (
  <Router basename="/blog">
    <div>
      <Header />
      <Route exact path="/" component={Main}/>
      <Route path="/article/:id" component={ArticleView}/>
    </div>
  </Router>
)

I can access history or match via props in the Main and ArticleView component. But I cannot access it in the <Header />. Is there a way to get the history object in the Header component?

score 31 · Accepted Answer · edited Mar 02 '18 at 10:26

31

You can use the withRouter HOC for this.

Where your Header component is defined, wrapping the export in a withRouter invocation like below will give your Header component access to match, location, and history

import {withRouter} from 'react-router'

class Header extends Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }
  render () {
    const { match, location, history } = this.props

    return <h2>The Header</h2>
  }
}

export default withRouter(Header)

edited Mar 02 '18 at 10:26

mb21

34,845
8
116
142

answered Mar 04 '17 at 15:31

Tyler McGinnis

34,836
16
72
77

5

I think withRouter only works if the component is part of . Correct me if I am wrong. Thank you :) – Tahnik Mustasin Mar 04 '17 at 22:47
3

If the component is part of , there should be no need to use withRouter then. Unless I'm confused. – Tyler McGinnis Mar 05 '17 at 19:58
2

Hey @Tayler, you're confused haha. My
is not part of a . It is inside but not . So I can't access those props from there. – Tahnik Mustasin Mar 06 '17 at 13:44
7

Tyler's answer is correct. You can access to history, match or location by two ways: 1. By `withRouter` wrapper 2. By passing Header to Route: `` – Sergey Reutskiy Mar 06 '17 at 19:16
Yeah. That's the entire point of withRouter. Did you try out the code I gave you? – Tyler McGinnis Mar 06 '17 at 19:56
@SergeyReutskiy I can't pass Header to the Route because it's common between different routes and I don't want it to be rendered again and again. I tried wrapping the header using withRouter HOC. It still says PropTypes history is required but the value is undefined. – Tahnik Mustasin Mar 07 '17 at 13:25
1

Worked for me. Thanks @TylerMcGinnis – blacktone Aug 01 '17 at 00:04
1

When I try to use "withRouter" as shown here I get the error, `You should not use or withRouter() outside a ` – Jim Apr 03 '18 at 21:33
@Jim maybe you haven't Routes at all? I mean at least single Route at the top level of components' tree should exist. – Nickensoul Jan 23 '19 at 07:48
Also, make sure that your main app is encapsulated by `` – Rohit Bandooni Mar 30 '21 at 16:09

How to access history object outside in React Router v4

1 Answers1

Linked