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

Question

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.

Answer 1

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.