Get path params in react-router v4

I'm trying to build a router link through my application,

In this scenario, I have three files.




I have inside of Book built up a <Link> that only appears when hovered ( over a book cover )

{this.state.isHovered ? (
   <Link to={`/details/${[1].identifier}`}>
<div className="hover-box"></div>
</Link>) : ( <div /> )}

This will take me to a /details/12345 (isbn10 number)

The thing I have a hard time to understand is how to for example setState({iPressedThisBook}) when pressing <Link> or if i can use the part after /12345 to create like a filter

Because in App the Route will be hooked up as...

<Route path="/details/:id" render={() => (
            bookStateUpdated = {this.bookStateUpdated}
            book = {this.state.books}

I, later on, want to grab the :id so that I make for example a inside of my <BookDetailedView>



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

Sample Code:

import {withRouter} from 'react-router';

class BookDetailedView extends React.Component {
    render() {
        var id =

export default withRouter(BookDetailedView) ;

or simply passing it with render prop in route as

<Route path="/details/:id" render={({match}) => (
            bookStateUpdated = {this.bookStateUpdated}
            book = {this.state.books}

From the React Documentation of 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:

  1. Route component as this.props.match
  2. Route render as ({ match }) => ()
  3. Route children as ({ match }) => ()
  4. withRouter as this.props.match
  5. 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


You can access :id by doing

you can handle routing many ways, you don't have to do a you can also handle it in a function .

function doSomethingWhenClicked(id)
        pathname: '/example/'+id

and bind this function on a onclick element


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.