title: React Router Pass Param to Component
body: <pre><code>const rootEl = document.getElementById('root');
  
  ReactDOM.render(
      &lt;BrowserRouter&gt;
          &lt;Switch&gt;
              &lt;Route exact path="/"&gt;
                  &lt;MasterPage /&gt;
              &lt;/Route&gt;
              &lt;Route exact path="/details/:id" &gt;
                  &lt;DetailsPage /&gt;
              &lt;/Route&gt;
          &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;,
      rootEl
  );
  </code></pre>
  
  <p>I am trying access the <b>id</b> in the DetailsPage component but it is not being accessible. I tried </p>
  
  <pre><code>&lt;DetailsPage foo={this.props}/&gt;
  </code></pre>
  
  <p>to pass parameters to the DetailsPage, but in vain. </p>
  
  <pre><code>export default class DetailsPage extends Component {
      constructor(props) {
          super(props);
      }
  
      render() {
          return (
              &lt;div className="page"&gt;
              &lt;Header /&gt;
              &lt;div id="mainContentContainer" &gt;
  
              &lt;/div&gt;
              &lt;/div&gt;
      );
      }
  }
  </code></pre>
  
  <p>So any idea how to pass the ID on to the DetailsPage ?</p>