need to access url inside header component in react

Question

<Provider store = {store}>
        <Router history = {history} >
           <section>
                <Header/>
                <Route exact path="/" component={DealList}/>
                <Route path = "/deal" component={FormDeal}/>
                <Route path = "/admin" component={Admin}/>
                <Footer/>
           </section>
      </Router>
      </Provider> 

I want to access the url of the browser through my Header component . But this.props is empty .
How do i access the url and is the routing for header and footer fine with react-router version-4

Answer 1

You can use withRouter function.

withRouter will re-render its component every time the route changes with the same props as render props: { match, location, history }.

In your case you could write something like that:

render(){
  const HeaderWithRouter = withRouter(Header);
  return (
    <Provider store = {store}>
            <Router history = {history} >
               <section>
                    <HeaderWithRouter/>
                    <Route exact path="/" component={DealList}/>
                    <Route path = "/deal" component={FormDeal}/>
                    <Route path = "/admin" component={Admin}/>
                    <Footer/>
               </section>
          </Router>
    </Provider>
  );
}

Answer 2

Wrap Header in withRouter() and then in Header component use:

this.props.location for accessing url
// use WrappedHeader inside Provider
const WrappedHeader = withRouter(Header)
// in Header
this.props.location