😁Một cách khôn ngoan sử dụng function element trong class element (ok)

https://stackoverflow.com/questions/58548767/react-router-dom-useparams-inside-class-component

Danh sách các hàm sử dụng trong react-router-dom

AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, 
NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, 
ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, 
UNSAFE_ErrorResponseImpl, UNSAFE_FetchersContext, UNSAFE_LocationContext, 
UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, 
UNSAFE_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, 
createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, 
createRoutesFromElements, createSearchParams, defer, generatePath, 
isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, 
redirectDocument, renderMatches, replace, resolvePath, unstable_HistoryRouter, 
unstable_usePrompt, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, 
useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, 
useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, 
useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, 
useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, 
useRoutes, useSearchParams, useSubmit, 
useViewTransitionState

Ví dụ này đã thực hiện

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);

src\components\Product.tsx

import React, { Component } from 'react';
import { useParams,useLocation} from 'react-router-dom';
function withParams(Component:any) {
  return (props:any) => <Component {...props} params={useParams()} location={useLocation()}  />;
}
class Product extends Component<any,any> {
  render() {
    console.log(this.props);
    var {params: {slug}} = this.props;
    return (
      <div className="Product text-center">
        <h1>Trang chi tiết sản phẩm: {slug} </h1>
      </div>
    );
  }
}
export default withParams(Product);

Hoặc sử dụng cách này

class TaskDetail extends React.Component {
    componentDidMount() {
        const { id } = this.props.params;
        // ...
    }
}
export default (props) => (
    <TaskDetail
        {...props}
        params={useParams()}
    />
);

src\components\Product.tsx

import React, { Component } from 'react';
import { useParams,useLocation} from 'react-router-dom';
function withParams(Component:any) {
  return (props:any) => <Component {...props} params={useParams()} location={useLocation()}  />;
}
class Product extends Component<any,any> {
  render() {
    console.log(this.props);
    var {params: {slug}} = this.props;
    return (
      <div className="Product text-center">
        <h1>Trang chi tiết sản phẩm: {slug} </h1>
      </div>
    );
  }
}
export default (props:any) => (
  <Product
      {...props}
      params={useParams()}
  />
);