CODEWITHSUNDEEP
javascriptreactjs
Mobygo
Mobygo

Reputation: 61

'react-router-dom' does not contain an export named 'useParams'

In App.js I have the following route:

<Route path="/Comp1/:catid">
    <Comp1 />
</Route>

This route can be called by clicking this link with a single parameter:

<Link to={'/Comp1/' + catid}>Comp1 </Link>

The parameter catid always has a certain value.

Comp1 is a component defined as follows:

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

export default class Comp1 extends Component {

    componentDidMount() {
        const params = useParams();
        const { catid } = params.catid;
        console.log(catid);
    }

    componentDidUpdate() {

    }

    render() {
        return (
            <div>
                Hello, I am class Comp1
            </div>
        );
    }
};

But what is happening now is at runtime, I am getting the following debug output:

'react-router-dom' does not contain an export named 'useParams'

--edit--

Installed version of react-router-dom is 4.2.2.

Upvotes: 1

Views: 1935

Answers (1)

Domi
Domi

Reputation: 24508

Definitely a version issue. Also discussed in this official issue.

Solution: Make sure you are using react-router-dom@>=5.1, since that particular hook was introduced in the 5.1 release.

If you have trouble getting modules installed at a proper version, then is the perfect time to practice just that, especially since it is very likely going to happen again and again, if you don't.

enter image description here

Upvotes: 2

Related Questions