Question

82

Get path params in react-router v4

rated 0 times [ 89] [ 7] / answers: 1 / hits: 35343 / 7 Years ago, wed, august 2, 2017, 12:00:00

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

In this scenario, I have three files.

App.js

Book.js

DetailedView.js

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

{this.state.isHovered ? (

   <Link to={`/details/${this.props.book.industryIdentifiers[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={() => (

          <BookDetailedView

            bookStateUpdated = {this.bookStateUpdated}

            book = {this.state.books}

          />

)}/>

I, later on, want to grab the :id so that I make for example a this.props.book.find(:id) inside of my <BookDetailedView>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

madilynndiannac

Add To Favorites

Follow

Total Points: 191

Total Questions: 93

Total Answers: 111

Location: France

Member since Thu, Oct 15, 2020

4 Years ago

answered 7 Years ago dequant · Accepted Answer

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