react Js - × TypeError：无法读取未定义的属性（读取'params'

Question

Here im trying to edit a post on my web app. But when I it says × TypeError: Cannot read properties of undefined (reading 'params' can someone point out the error. im doing this wacthing a tutorial. It works fine. but in my code it doesnt work. and I tried importing useParams and using it. but it says useParams cannot use in class components. can someone point out the error or give me a fix please?

import React, {Component} from 'react';
import axios from 'axios';
import {Dropdown} from "react-bootstrap";
import {useParams} from "react-router-dom";


class Feed2 extends Component {
    constructor(props){
        super(props);
        this.state={
            vehicle:"",
            plateNo:"",
            owner:"",
            manufacturer:"",
            manufacturedYear:"",
            color:""
        }
        
    }


    takInput = (e) => {
        const {name,value}= e.target;
        this.setState({
            ...this.state,
            [name]:value
        })
    }

    register = (e) =>{
        e.preventDefault();
        const id = this.props.match.params.id;
        const {plateNo,owner,manufacturer,manufacturedYear,color,vehicle} = this.state;
        const data ={
            plateNo:plateNo,
            owner:owner,
            manufacturer:manufacturer,
            manufacturedYear:manufacturedYear,
            color:color,
            vehicle:vehicle
        }

        console.log(data);
        axios.put(`http://localhost:8080/registrations/update/${id}`,data).then((res)=>{
            if(res.data.success){
                alert("Post Updated");
                this.setState({
                    vehicle:"",
                    plateNo:"",
                    owner:"",
                    manufacturer:"",
                    manufacturedYear:"",
                    color:""
                })
            }
        })
    }
    componentDidMount(){
        const id = this.props.match.params.id;
        axios.get(`/registrations/${id}`).then((res) =>{
            if(res.data.success){
                this.setState({
                   plateNo:res.data.registrations.plateNo,
                    owner:res.data.registrations.owner,
                    manufacturer:res.data.registrations.manufacturer,
                    manufacturedYear:res.data.registrations.manufacturedYear,
                    color:res.data.registration.color,
                    vehicle:res.data.registrations.vehicle
                })
                console.log(this.state.registrations)
            }
        })
    }


    render() {
        return (
            <div className="container">
                <div className="register-box">
                    <div className="Top">

                        <div className="box">
                            <input placeholder="Enter the licence plate number "
                                   className="input2" name="plateNo" value={this.state.plateNo} onChange={this.takInput} />
                        </div>

                    </div>
                    <div className="box">
                        <input placeholder="Enter the owners name "
                               className="input2" name="owner" value={this.state.owner} onChange={this.takInput} />
                    </div>
                    <div className="box">
                        <input placeholder=" Manufactured Year "
                               className="input2" name="manufacturedYear" value={this.state.manufacturedYear} onChange={this.takInput} />
                    </div>
                    <div className="box">
                        <input placeholder="Manufacturer"
                               className="input2" name="manufacturer" value={this.state.manufacturer} onChange={this.takInput} />
                    </div>
                    <div className="box">
                        <input placeholder="Color of the vehicle "
                               className="input2" name="color" value={this.state.color} onChange={this.takInput} />
                    </div>
                    <div className="box">
                        <input placeholder="Vehicle name "
                               className="input2" name="vehicle" value={this.state.vehicle} onChange={this.takInput} />
                    </div>

                    <Dropdown className="drop">
                        <Dropdown.Toggle variant="success" id="dropdown-basic">
                            Select Vehicle Type
                        </Dropdown.Toggle>

                        <Dropdown.Menu>
                            <Dropdown.Item href="#/action-1">Car</Dropdown.Item>
                            <Dropdown.Item href="#/action-2">Van</Dropdown.Item>
                            <Dropdown.Item href="#/action-3">Bus</Dropdown.Item>
                            <Dropdown.Item href="#/action-3">Lorry</Dropdown.Item>
                            <Dropdown.Item href="#/action-3">Three-weeler</Dropdown.Item>
                            <Dropdown.Item href="#/action-3">Bike</Dropdown.Item>
                            <Dropdown.Item href="#/action-3">Other</Dropdown.Item>

                        </Dropdown.Menu>
                    </Dropdown>



                    <div className="regbuttonContainer">
                        <button className="Button" onClick={this.register}>Register Vehicle</button>
                    </div>
                </div>

            </div>
        );
    }
}


export default Feed2;

Answer 1

I guess you need to wrap this component with withRouter HOC, So it be like export default withRouter(Feed2);

and import withRouter from 'react-router-dom';