React Router Pass Param to Component : <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>
