title: React Router access params from another component
body: <p>I am currently looking into React.js &amp; Redux and was playing around with react-router. My question is: Is there a way to access url params from another Component?</p>
  
  <p>For example:</p>
  
  <p>I have a <code>Foo</code> component which displays the <code>:bar</code> param (via <code>props.match.params.bar</code>), but I also want to display the value of <code>:bar</code> in the Header Component. With <code>ReactRouterDOM.withRouter</code> I can get access to <code>props.match</code>. The Problem is that this is not the same as in the <code>Foo</code> Component (it contains the information about the parent route '/'). So how do I get the value in the <code>Header</code> Component and am I even on the right track?</p>
  
  <p>Thanks in advance</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const Foo = (props) =&gt; {
      return (&lt;div&gt; &lt;h1&gt; Foo {props.match.params.bar} &lt;/h1&gt; &lt;/div&gt;);
  };
  
  const App = (props) =&gt; {
      return (
          &lt;div&gt;
              &lt;HeaderWrapper /&gt;
              &lt;h1&gt; Hello App &lt;/h1&gt;
              &lt;p&gt;&lt;ReactRouterDOM.Link to='/foo/bar'&gt;Foo Bar&lt;/ReactRouterDOM.Link&gt;&lt;/p&gt;
              &lt;hr /&gt;
          
              &lt;ReactRouterDOM.Route path='/foo/:bar' component={Foo} /&gt;
          &lt;/div&gt;);
  };
  
  // Header
  const Header = (props) =&gt; {
      console.log(props);
      return ( &lt;header&gt; &lt;small&gt;You are here: {}&lt;/small&gt;  &lt;/header&gt;);
  };
  const HeaderWrapper = ReactRouterDOM.withRouter(Header);
  
  // Router
  ReactDOM.render((
          &lt;ReactRouterDOM.MemoryRouter&gt;
              &lt;ReactRouterDOM.Route path='/' component={App} /&gt;
          &lt;/ReactRouterDOM.MemoryRouter &gt;
   ), document.getElementById('root'));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;&lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>