not getting location react router?

Question

id like to change my header color when in my contact page. unable to get location from react router. I get "TypeError: Cannot read property 'pathname' of undefined".

I know I'm missing something simple but i cant seem to figure it out.

import React from 'react';
import './Header.css';
import { NavLink } from 'react-router-dom';

class Header extends React.Component {

  render() {

    const blackHeader = {"background-color" : 'black'}
    const clearHeader = {"background-color" : 'transparent'}

    return(
        <header style={ this.props.location.pathname === '/Contact' ? { blackHeader } : { clearHeader } }>
          <NavLink to={'/'}><h2>Name</h2></NavLink>
          <nav>
            <ul>
              <li><NavLink to={'/'}>Portfolio</NavLink></li>
              <li><NavLink to={'Contact'}>Contact</NavLink></li>
              <li>Blog</li>
            </ul>
          </nav>
        </header>
    )
  }
}

export default Header;

How are you using this `Header` component in your app? Is it a `component` prop to a `Route` component? — Tholle, Nov 09 '18 at 19:27
Possible duplicate of [react router this.props.location](https://stackoverflow.com/questions/42010053/react-router-this-props-location) — Sterling Archer, Nov 09 '18 at 19:29
@Tholle yes Header is in a Route component. got in working with withRouter, but still confused as to why i couldn't pass it as props though. — Adam G, Nov 09 '18 at 20:23

seanulus · Accepted Answer · 2018-11-09T20:55:57.040

-1

You need to pass the location props to your Header component or you can use the HOC withRouter in react-router-dom.

import { NavLink, withRouter } from 'react-router-dom';
export default withRouter(Header)

Edit for clarity:

If you render a component in your router in a Route component:

<Route path='/' component={Home} />

This will give that component (Home in this case) access to the location props which can then be passed to children of that component.

import React, { Component } from 'react'
import OtherComponent from './OtherComponent'

class Home extends Component {
  render() {
    return (
      <div>
        <OtherComponent locations={this.props.locations}
      </div>
    )
  }
}
export default Home;

However, if the component is not passed through Route it will not have access to location props. For example, if you put your header outside of your routes, something like:

<Router>
  <Header/>
  <Switch>
    <Route path='/' component={Home}/>
  </Switch>
</Router>

It will not have location props.

I'm not sure how your component tree is set up but, I hope this gives a little clarity to how the location props are accessed and used in your app.

The documentation is a good place to get some more clarity on the workings of react router as well https://reacttraining.com/react-router/core/api/Route/route-props

edited Nov 09 '18 at 20:55

answered Nov 09 '18 at 19:34

seanulus

885
4
8

when i try to pass location props to my header with
i just get "location: undefined" – Adam G Nov 09 '18 at 19:45
Do you have access to the location props in the parent? Try logging the props in the parent. – seanulus Nov 09 '18 at 19:50
No. All i see is the_proto_ object? @seanulus – Adam G Nov 09 '18 at 19:55
Alright. it's like @Tholle was saying above. If your component isn't rendered through a component, you won't have access to the location props in said component. The withRouter higher order component should give you access to the location props as well, although, I'm not sure if it's bad practice to go wrapping all your components if you're able to pass props instead. – seanulus Nov 09 '18 at 20:01
Thanks for your help. I got it working with withRouter as you said. But still curious why i couldn't pass location as props. Do you know why I wasn't able to? – Adam G Nov 09 '18 at 20:21
Just saw your comment above. Not sure why it wouldn't have access to location props if it is passed through a Route. – seanulus Nov 09 '18 at 20:56

Akolade Adesanmi · Answer 2 · 2018-11-09T20:05:03.947

-1

Yea, I can see in the contact path

<li><NavLink to={'Contact'}>Contact</NavLink></li> , it should be something like

<li><NavLink to='/Contact'>Contact</NavLink></li>.

You have to include the back slash, I mean this ' / ' before the pathname. So try it now.

edited Nov 09 '18 at 20:05

answered Nov 09 '18 at 19:36

Akolade Adesanmi

1,152
11
15

My routes are working, but my problem is that i can't access the location props. – Adam G Nov 09 '18 at 19:49

not getting location react router?

2 Answers2