react router this.props.location

Question

I need a help with react-router v2+ I have to change class of navbar when route changed for example for route /profile className will be "profile-header" I tried to use this.props.location in navbar component but it shows undefined

Hope your help

szymonm · Accepted Answer · 2018-08-07T08:16:10.627

Your navbar component (as you described it in your question) is probably not the route component, right? By route component I mean the one that you use in your react-router configuration that is loaded for a specific route.

this.props.location is accessible only on such route component, so you need to pass it down to your navbar.

Let's take an example:

Your router config:

<Router>
    <Route path="/" component={App}>
    // ...
</Router

Route component App:

class App extends React.Component{
  // ...
  render() {
    return <Navbar location={this.props.location}/>
  }
}

varoons · Answer 2 · 2019-01-10T18:07:06.117

9

There could be a scenario where you may not have access to props.location to pass to the nav component.

Take for example - We had a header component in our project which was included in the routing switch to make it available to all routes.

<Switch>
  <Fragment>
    <Header/>
    <Route path='..' component={...}/>
    <Route path='..' component={...}/>
  </Fragment>
</Switch>

In the above scenario there is no way to pass the location data to the Header component.

A better solution would be to us the withRouter HOC when a component is not being rendered by your router. You will still have access to the router properties history, match and location when you wrap it in the withRouter HOC:

import { withRouter } from 'react-router-dom'
.... 
....
export default withRouter(ThisComponent)

edited Jan 10 '19 at 18:07

answered Jan 10 '19 at 17:49

varoons

3,807
1
16
20

`export default withRouter(ThisComponent)` : What will be ThisComponent. `Header`? – Kushal Dec 10 '19 at 09:47
1

Yes, in order to access location data inside Header – varoons Dec 10 '19 at 18:32
Can you answer https://stackoverflow.com/q/59262734/1994950 ? – Kushal Dec 11 '19 at 07:12
1

Thanks, bro! Ive tried almost all solutions and yours was the only one that have worked in my case – Euler Ribeiro Sudbrack Jan 30 '20 at 01:29

score 2 · Answer 3 · edited Jun 20 '20 at 09:12

react-router v4

From documentation:

<Route> component property should be used, when you have an existing component. <Route> render property takes an inline function, that returns html.

A <Route> with no path will always match.

Based on this, we can make a <Route> wrapper to any level of your html structure. It will always be displayed and have access to the location object.

As per your request, if a user comes to /profile page, the <header> will have profile-header class name.

<Router>
    <Route render={({ location }) =>
        <header className={location.pathname.replace(/\//g, '') + '-header'}>
            // header content...
        </header>

        <div id="content"></div>

        <footer></footer>
    } />
</Router>

score 1 · Answer 4 · answered Apr 06 '19 at 15:54

1

I couldn't solve it with the solutions given here and here is what worked for me:

I imported history into my component and assigned history.location.pathname to a variable which I later used for dynamic style manipulation.

answered Apr 06 '19 at 15:54

Arthur Burgan

123
4

score 0 · Answer 5 · answered Nov 24 '19 at 07:43

0

In case you are rendering the component with pre-defined location.state values, first set your state with props.location.state then use your state data in your elements.

answered Nov 24 '19 at 07:43

ETZE

145
5

I tried it in `render()` method. I tried to set state from `props.location`. But it gave infinite loop of rendering as `setState() -> render() -> serState() -> render() ...` likewise. So better to use approach mentioned at https://stackoverflow.com/a/59264602/1994950 answer – Kushal Dec 10 '19 at 10:13

react router this.props.location

5 Answers5

Linked