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)

You are not passing props

lissettdm
– lissettdm

2022-02-16 17:36:01 +00:00
Commented Feb 16, 2022 at 17:36 — lissettdm
– lissettdm, Commented Feb 16, 2022 at 17:36
Can you please elaborate?

Mary Doe
– Mary Doe

2022-02-16 17:38:04 +00:00
Commented Feb 16, 2022 at 17:38 — Mary Doe
– Mary Doe, Commented Feb 16, 2022 at 17:38

lissettdm · Accepted Answer · 2022-02-16 18:19:12Z

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, 2022 at 18:19

answered Feb 16, 2022 at 18:08

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mary Doe Over a year ago

Where exactly am I typing this code? ?

lissettdm Over a year ago

You can export BookDetails--> export default WithRouter(BookDetails)....or create a variable BookDetailRoute = WithRouter(BookDetails), then use this component on your routes

Mary Doe Over a year ago

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 Over a year ago

I added useParams and now it is working. Thanks for your help!

lissettdm Over a year ago

Yes, also you can create this HOCs individually depend on what you need, function withParams(Component) { return props => <Component {...props} params={useParams()} />; }

RWUBAKWANAYO · Accepted Answer · 2022-02-16 18:09:04Z

0

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

answered Feb 16, 2022 at 18:09

RWUBAKWANAYO

411 silver badge4 bronze badges

Collectives™ on Stack Overflow

Passing Route Parameters in React Using React-Router-Dom

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related