React Router Pass Param to Component

Question

const rootEl = document.getElementById('root');  ReactDOM.render(     <BrowserRouter>         <Switch>             <Route exact path="/">                 <MasterPage />             </Route>             <Route exact path="/details/:id" >                 <DetailsPage />             </Route>         </Switch>     </BrowserRouter>,     rootEl ); 

I am trying access the id in the DetailsPage component but it is not being accessible. I tried

<DetailsPage foo={this.props}/> 

to pass parameters to the DetailsPage, but in vain.

export default class DetailsPage extends Component {     constructor(props) {         super(props);     }      render() {         return (             <div className="page">             <Header />             <div id="mainContentContainer" >              </div>             </div>     );     } } 

So any idea how to pass the ID on to the DetailsPage ?

Answer 1

I used this to access the ID in my component:

<Route path="/details/:id" component={DetailsPage}/> 

And in the detail component:

export default class DetailsPage extends Component {   render() {     return(       <div>         <h2>{this.props.match.params.id}</h2>       </div>     )   } } 

This will render any ID inside an h2, hope that helps someone.

Answer 2

If you want to pass props to a component inside a route, the simplest way is by utilizing the render, like this:

<Route exact path="/details/:id" render={(props) => <DetailsPage globalStore={globalStore} {...props} /> } /> 

You can access the props inside the DetailPage using:

this.props.match this.props.globalStore 

The {...props} is needed to pass the original Route's props, otherwise you will only get this.props.globalStore inside the DetailPage.