Passing Route Parameters in React Using React-Router-Dom

Question

In React-Router-Dom V6 Preview I am having issues passing the parameters to a component. Here is index.js file with all the routes.

 <BaseLayout>
      <Routes>
          <Route path = "/" element = {<App />} />
          <Route path = "/add-book" element = {<AddNewBook />} />
          <Route path = "/name" element = {<Name />} />
          <Route path = "/books/:id" element = {<BookDetail />} />
      </Routes>
      </BaseLayout>

The problem is when I go to BookDetail I cannot access the parameters using

this.props.history.match.params.id 


class BookDetail extends Component {

    constructor(props) {
        super(props) 
    }

    componentDidMount() {
        console.log(this.props) // this.props is empty object 
    }

    render() {
        return (
            <h1>BookDetail</h1>
        )
    }
}


Even this.props is an empty object.

And NO for this project I cannot use hooks.

UPDATE (SOLUTION):

import React, { Component } from 'react'
import { useLocation, useNavigate, useParams } from 'react-router-dom'

class BookDetail extends Component {

    constructor(props) {
        super(props) 
    }

    componentDidMount() {
        // this.props is always empty object 
        console.log(this.props.params.id)
    }

    render() {

        return (
            <h1>BookDetail</h1>
        )
    }
}

const withRouter = (Component) => (props) => {
    const history = useNavigate();
    const location = useLocation();
    const params = useParams(); 
    return <Component params = {params} history={history} location={location} {...props} />;
};

export default withRouter(BookDetail)

lissettdm · Accepted Answer · 2022-02-16T18:19:12.210

3

In this case you will need to create a wrapper component to pass those properties:

const WithRouter = (Component) => (props) => {
  const history = useNavigate();
  const location = useLocation();
  return <Component history={history} location={location} {...props} />;
};

then in your BookDetails file:

export default WithRouter(BookDetails);

edited Feb 16 '22 at 18:19

answered Feb 16 '22 at 18:08

lissettdm

12,267
1
18
39

Where exactly am I typing this code? ? – Mary Doe Feb 16 '22 at 18:13
You can export BookDetails--> `export default WithRouter(BookDetails)`....or create a variable BookDetailRoute = WithRouter(BookDetails), then use this component on your routes – lissettdm Feb 16 '22 at 18:17
So I can access the this.props with your code but there is no way to get access to the params. this.props.location.???? – Mary Doe Feb 16 '22 at 18:20
1

I added useParams and now it is working. Thanks for your help! – Mary Doe Feb 16 '22 at 18:22
Yes, also you can create this HOCs individually depend on what you need, `function withParams(Component) { return props => ; }` – lissettdm Feb 16 '22 at 18:25

score 0 · Answer 2 · answered Feb 16 '22 at 18:09

You're using react-router v6 which history is no longer working, History has been replaced with useNavigate. In function component, this can be very easy because you've to replace useHistory() with useNavigate but if you prefer to use class component, check out this solution: How to use react-router-dom v6 navigate in class component

Passing Route Parameters in React Using React-Router-Dom

2 Answers2