title: Get path name of route globally in react
body: <p>I have a basic routing SPA working using <code>react-router-dom v4</code> and I would like to get the current route (path name) for use in my header (outer context of the app - not sure if that's accurate nomenclature). I want to have a button in my app bar which will do something depending on the route currently in use. </p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>ReactDOM.render((
    &lt;MuiThemeProvider&gt;
      &lt;div&gt;
        &lt;Router history={history}&gt;
          &lt;div&gt;
            &lt;Header /&gt;
            &lt;MainView /&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    &lt;/MuiThemeProvider&gt;
  ), document.getElementById('app'));
  </code></pre>
  
  <p><strong>header.js</strong></p>
  
  <pre><code>class Header extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        open: false
      };
    }
  
    toggleDrawer(){
      this.setState({open: !this.state.open}, ()=&gt; {console.log(this.state)});
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;AppBar
            iconClassNameRight="muidocs-icon-navigation-expand-more"
            onLeftIconButtonTouchTap={()=&gt;{this.toggleDrawer()}}
            iconElementRight={&lt;FlatButton label="Create New"/&gt;}
          /&gt;
  
          ...
  </code></pre>
  
  <p>In the <code>header.js</code> I want access to the route's pathname to call a certain function from the <code>&lt;FlatButton /&gt;</code> on the right of the appbar. I've tried <code>{this.props.location.pathname}</code> as per the v4 docs but only got errors. TBH I was probably using it wrong though.</p>