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

ChrisR · Accepted Answer · 2017-09-11 17:21:58Z

3

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>
  );
}

answered Sep 11, 2017 at 17:21

ChrisR

3,9981 gold badge18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yash Sharma Over a year ago

if i want to wrap header only to some routes and not all. then what to do ?

ChrisR Over a year ago

Use a Route to render it?

rony36 · Accepted Answer · 2017-09-12 03:39:56Z

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

edited Sep 12, 2017 at 3:39

rony36

3,3691 gold badge34 silver badges44 bronze badges

answered Sep 11, 2017 at 18:08

Mahesh Bhuva

7745 silver badges18 bronze badges

Collectives™ on Stack Overflow

need to access url inside header component in react

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related