react-router-dom useParams() dentro del componente de clase

Estoy tratando de cargar una vista de detalles basada en una ruta react-router-dom que debería capturar el parámetro de URL (id) y usarlo para completar aún más el componente.

Parece que mi ruta /task/:idy mi componente se cargan bien, hasta que trato de tomar el:id de la URL así:

import React from "react";
import { useParams } from "react-router-dom";
class TaskDetail extends React.Component {
 componentDidMount() {
 let { id } = useParams();
 this.fetchData(id);
 }
 fetchData = id => {
 //...
 };
 render() {
 return <div>Yo</div>;
 }
}
export default TaskDetail;

Esto desencadena el siguiente error y no estoy seguro de dónde implementar correctamente useParams().

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Los documentos solo muestran ejemplos basados ​​en componentes funcionales, no basados ​​en clases.

Solución del problema

import React, { Component } from "react";
import { useParams } from "react-router-dom";
function withParams(Component) {
 return props => <Component {...props} params={useParams()} />;
}
class TaskDetail extends React.Component {
 componentDidMount() {
 let { id } = this.props.params;
 this.fetchData(id);
 }
 fetchData = id => {
 //...
 };
 render() {
 return <div>Yo</div>;
 }
}
export default withParams(TaskDetail);