Dfyjkt

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;

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

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.