In order to receive the path param in you component, you need to first connect your component with withRouter
HOC from react-router
so that you can access the Router props and get the path params
from the match
props as this.props.match.params.id
Sample Code:
import {withRouter} from 'react-router';
class BookDetailedView extends React.Component {
render() {
var id = this.props.match.params.id
}
}
export default withRouter(BookDetailedView) ;
or simply passing it with render prop in route as
<Route path="/details/:id" render={({match}) => (
<BookDetailedView
bookStateUpdated = {this.bookStateUpdated}
book = {this.state.books}
id={match.params.id}
/>
)}/>
From the React Documentation of match
match
A match object contains information about how a
<Route path>
matched
the URL.match
objects contain the following properties:
- params – (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path
- isExact – (boolean) true if the entire URL was matched (no trailing characters)
- path – (string) The path pattern used to match. Useful for building nested s
- url – (string) The matched portion of the URL. Useful for building nested s
You’ll have access match objects in various places:
- Route component as
this.props.match
- Route render as ({ match }) => ()
- Route children as ({ match }) => ()
- withRouter as this.props.match
- matchPath as the return value
If a Route does not have a path, and therefore always matches, you’ll
get the closest parent match. Same goes for withRouter