🫢Chú ý this.context thật sự là rất quan trọng nó lấy được id đường dẫn, history ... (ok)

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

Xem bài React Api Typescript Step By Step để lấy được file đầy đủ

this.context

src\Pages\ProductActionPage.tsx

import React, { Component } from 'react';
import { Link, UNSAFE_RouteContext, useParams } from 'react-router-dom';
import { actAddProductRequest } from '../actions';
import { connect } from 'react-redux';
import queryString from 'query-string';
var _ = require("lodash");
function withParams(Component:any) {
  return (props:any) => <Component {...props} params={useParams()} />;
}
class ProductActionPage extends Component<any, any> {
  static contextType = UNSAFE_RouteContext;
  constructor(props: any) {
    super(props);
    this.state = {
      id: '',
      txtName: '',
      txtPrice: '',
      chkbStatus: ''
    };
  }
  onChange = (e: any) => {
    var target = e.target;
    var name = target.name;
    var value = target.type === 'checkbox' ? target.checked : target.value;
    this.setState({
      [name]: value
    });
  }
  componentDidMount() {
    let {matches}:any = this.context
    let routeMatch = matches[matches.length - 1];
    const params = routeMatch ? routeMatch.params : {};
    // say route is "/task/:id" and url is mywebsite.com/task/12, 
    // this will print '{id: 12}'
    console.log(this.context)
    // let { id } = this.props.params;
    // console.log(id);
    // const params = queryString.parse(); 
    // console.log('Do something with it', params);
    // if (match) {
      // var id = match.params.id;
      // this.props.onEditProduct(id);
    // }
  }
  // componentWillReceiveProps(nextProps:any) {
  //   console.log(nextProps);
  //   console.log("nextProps");
  //   if (nextProps && nextProps.itemEditing) {
  //     var { itemEditing } = nextProps;
  //     this.setState({
  //       id: itemEditing.id,
  //       txtName: itemEditing.name,
  //       txtPrice: itemEditing.price,
  //       chkbStatus: itemEditing.status
  //     });
  //   }
  // }
  onSave = (e: any) => {
    e.preventDefault();
    var { id, txtName, txtPrice, chkbStatus } = this.state;
    var product = {
      id: id,
      name: txtName,
      price: txtPrice,
      status: chkbStatus
    };
    if (id) {
      // this.props.onUpdateProduct(product);
    } else {
      // product.id = _.uniqueId;
      // this.props.onAddProduct(product);
    }
  }
  render() {
    var { id, txtName, txtPrice, chkbStatus } = this.state;
    return (
      <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <form onSubmit={this.onSave}>
          <div className="form-group">
            <label>Tên Sản Phẩm: </label>
            <input
              type="text"
              className="form-control"
              name="txtName"
              value={txtName}
              onChange={this.onChange}
            />
          </div>
          <div className="form-group">
            <label>Giá: </label>
            <input
              type="number"
              className="form-control"
              name="txtPrice"
              value={txtPrice}
              onChange={this.onChange}
            />
          </div>
          <div className="form-group">
            <label>Trạng Thái: </label>
          </div>
          <div className="checkbox">
            <label>
              <input
                type="checkbox"
                name="chkbStatus"
                value={chkbStatus}
                onChange={this.onChange}
                checked={chkbStatus}
              />
              Còn Hàng
            </label>
          </div>
          <Link to="/product-list" className="btn btn-danger mr-10">
            Trở Lại
          </Link>
          <button type="submit" className="btn btn-primary">Lưu Lại</button>
        </form>
      </div>
    );
  }
}
const mapStateToProps = (state:any) => {
  return {
    // itemEditing: state.itemEditing,
  }
}
const mapDispatchToProps = (dispatch:any, props:any) => {
  return {
    // onAddProduct: (product:any) => {
    //   dispatch(actAddProductRequest(product));
    // },
    // onEditProduct: (id:any) => {
    //   dispatch(actGetProductRequest(id));
    // },
    // onUpdateProduct: (product:any) => {
    //   dispatch(actUpdateProductRequest(product));
    // }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(ProductActionPage); // ProductActionPage