title: React Router V4 Get Current Path
body: <p>How can I get the current path using react router v4? </p>
  
  <p>I have tried the following to no avail: </p>
  
  <pre><code>const currentLocation = this.props.location.pathname;
  </code></pre>
  
  <p>Error: <code>Cannot read property 'pathname' of undefined</code></p>
  
  <p>Here is my Routes.js file: </p>
  
  <pre><code>import React, {Component} from 'react';
  import {  BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import { Provider } from 'react-redux';
  import configureStore from './Store';
  import LevelOne from './containers/LevelOne';
  import LevelTwo from './containers/LevelTwo';
  import LevelThree from './containers/LevelThree';
  import CreateProfile from './containers/Profile/CreateProfile';
  import WhosWatching from './containers/Profile/WhosWatching';
  import ProfileNameAvatar from './containers/Profile/ProfileNameAvatar';
  import FavouriteGenres from './containers/Profile/FavouriteGenres';
  import FourZeroFour from './containers/404';
  
  import Header from './components/Header';
  
  const store = configureStore();
  
  const navItems = [
    {
      title:"For You",
      to: "/for-you"
    },
    {
      title:"Movies",
      to: "/movies"
    },
    {
      title:"Series",
      to: "/series"
    },
    {
      title:"TV Shows",
      to: "/tv-Shows"
    },
    {
      title:"Subscriptions",
      to: "/subscriptions"
    },
    {
      title:"Live TV",
      to: "/live-tv"
    }
  ]
  
  export default class Routes extends Component {
    state = {
      theme: 'light'
    }
  
    header = React.createRef();
  
    setTheme = (theme) =&gt; {
      this.setState({
        theme: theme,
      });
    }
  
    render() {
      const currentLocation = this.props.location.pathname;
      console.log("location", currentLocation);
      return (
        &lt;Provider store={store}&gt;
          &lt;Router ref='router'&gt;
            &lt;div className='app'&gt;
              {/*&lt;Header navItems={navItems} theme={this.state.theme} ref={this.header} /&gt;*/}
              &lt;Switch&gt;
                &lt;Route exact path="/" render={(props) =&gt; (
                  &lt;LevelOne {...props} setTheme={this.setTheme} /&gt;
                )}/&gt;
                &lt;Route exact path="/for-you" render={(props) =&gt; (
                  &lt;LevelTwo {...props} setTheme={this.setTheme} /&gt;
                )}/&gt;
                &lt;Route exact path="/for-you/view-all" render={(props) =&gt; (
                  &lt;LevelThree {...props} setTheme={this.setTheme} innerRef={this.header} /&gt;
                )}/&gt;
                &lt;Route exact path="/profile/create-profile" render={(props) =&gt; (
                  &lt;CreateProfile {...props} /&gt;
                )}/&gt;
                &lt;Route exact path="/profile/whos-watching" render={(props) =&gt; (
                  &lt;WhosWatching {...props} /&gt;
                )}/&gt;
                &lt;Route exact path="/profile/profile-name-avatar" render={(props) =&gt; (
                  &lt;ProfileNameAvatar {...props} /&gt;
                )}/&gt;
                &lt;Route exact path="/profile/favourite-genres" render={(props) =&gt; (
                  &lt;FavouriteGenres {...props} /&gt;
                )}/&gt;
                &lt;Route component={FourZeroFour} /&gt;
              &lt;/Switch&gt;
            &lt;/div&gt;
          &lt;/Router&gt;
        &lt;/Provider&gt;
      );
    }
  }
  </code></pre>