title: Component cannot listen to react-router
body: <p>I have a component that is used persistently across my spa. I want it to be aware of my router and the various paths that my spa is on. Is there an easy way to do this, or do I have to bandaid some redux (or something similar) state solution that is always listening to my router changes? Thanks! You can see the below for an example.</p>
  
  <p><strong>index.jsx:</strong></p>
  
  <pre><code>import 'babel-polyfill';
  import React from 'react';
  import { render } from 'react-dom';
  import { Provider } from 'react-redux';
  import { ConnectedRouter } from 'connected-react-router';
  import { Route, Switch } from 'react-router-dom';
  import { history, store } from './redux/store';
  import Navigation from './navigation';
  
  const UserReport = () =&gt; &lt;h2&gt;User Report&lt;/h2&gt;;
  
  const UserPage = () =&gt; &lt;h2&gt;User Page&lt;/h2&gt;;
  
  const Routes = () =&gt; (
    &lt;React.Fragment&gt;
      &lt;Route component={Navigation} /&gt;
      &lt;Switch&gt;
        &lt;Route exact path="/users/:startDate" component={UserReport} /&gt;
        &lt;Route exact path="/users/:userId" component={UserPage} /&gt;
      &lt;/Switch&gt;
    &lt;/React.Fragment&gt;
  );
  
  render(
    &lt;Provider store={store}&gt;
      &lt;ConnectedRouter history={history}&gt;
        &lt;Routes /&gt;
      &lt;/ConnectedRouter&gt;
    &lt;/Provider&gt;, document.getElementById('app'),
  );
  </code></pre>
  
  <p><strong>navigation.jsx:</strong></p>
  
  <pre><code>import React from 'react';
  import { withRouter } from 'react-router-dom';
  
  const Navigation = (props) =&gt; {
    console.log(props.match.path);
    // expected: "/users/:startDate"
    // received: "/"
    return (
      &lt;h2&gt;Navigation&lt;/h2&gt;
    );
  };
  
  export default withRouter(Navigation);
  </code></pre>