Get path parameters in response-router v4

Question

I am trying to create a router link through my application,

In this case, I have three files.

App.js

Book.js

DetailedView.js

I have created a book inside <Link>that appears only when it hangs (above the cover of the book)

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

This will lead me to / details / 12345 (isbn10 number)

What I find difficult to understand is, for example, setState({iPressedThisBook})by clicking <Link>or if I can use the part afterwards /12345to create it as a filter

Because in App Routewill be connected as ...

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

I later want to capture :idwhat I do, for example, this.props.book.find(:id)inside my<BookDetailedView>

Answer 1

path , withRouter HOC react-router, params match this.props.match.params.id

:

import {withRouter} from 'react-router';

class BookDetailedView extends React.Component {
    render() {
        var id = this.props.match.params.id


    }
}
export default withRouter(BookDetailedView) ;

render prop

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

match

, <Route path>URL. match :

• params - (object) / URL-,
• isExact - (boolean) true, URL ( )
• path - (string) , . s
• url - () URL-. s

:

• this.props.match
• ({match}) = > ()
• ({match}) = > ()
• withRouter this.props.match
• matchPath

, . withRouter

Answer 2

: id, this.props.params.id

, .

function doSomethingWhenClicked(id)
{
      doSomething();
      this.props.history.push({
        pathname: '/example/'+id
      });   
      
 }

Hide result

onclick