match.params returns empty even when URL contains params

Question

I want to do an edit on a form when clicking on a specific ID for a booking so that the values from my ID will be passed on to the edit form. But match.params returns empty even when URL contains params. How can I solve this?

This is my edit a booking file:

export default function AdminEdit(props) {
    const [CategoryList, setCategory] = useState([]);
    const [data, setData] = useState({
        date: "",
        firstName: "",
        lastName: "",
        phone: "",
        email: "",
        noPersons: "",
        time: "",
    });

    useEffect(() => {
        const _id = props.match.params.id;
        console.log(props.match.params.id);
        console.log(_id);

        Axios.get(config.API_HOST_ORIGINAL + `/adminbookings/` + _id, {
            headers: {
                'Authorization': 'Bearer ' + config.getToken()
            }
        }).then(res => {
            setData(res.data)
            console.log("Logged res data:", res.data);

        }).catch(err => console.error(err))
    }, []);

    function submit(e) {
        e.preventDefault();
        Axios.post(config.API_HOST_ORIGINAL + '/bookings/', {
            headers: {
                'Authorization': 'Bearer ' + config.getToken()
            }
        }).then(res => {
            console.log(res.data);
            const myData = [...CategoryList, res.data]
            setCategory(myData)
        }).catch(err => console.error(err))
    }

    function handle(e) {
        const newData = { ...data }
        newData[e.target._id] = e.target.value;
        setData(newData);
    }


**Another other file:
This is where I take in all the bookings**

const Bookings = (props) => {
Some hooks...

  function Update(_id) {
    console.log("Log this shiiiet to console", _id);
    props.history.push("/adminedit/" + _id);
  }

return {
<>
    <td>
        <button type="button" 
        onClick={() => Update(bookings._id)} 
         className="btn btn-primary btn-sm">Edit</button>
     </td>
</>
}

export default Bookings;

Recives this warning!

Answer 1

You should use useParams hook from react-router-dom.

Also you should define id outside the useEffect

import {
  useParams
} from "react-router-dom";
...
let { id } = useParams();
...
useEffect(() => {
}, [])