Javascript 即使URL包含参数，match.params也返回空

我想在单击预订的特定ID时对表单进行编辑，以便将ID中的值传递到编辑表单。但是

match.params

即使URL包含参数也返回空。我怎样才能解决这个问题

这是我的编辑预订文件：

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;

导出默认功能AdminEdit（道具）{
常量[CategoryList，setCategory]=useState（[]）；
const[data，setData]=useState({
日期：“，
名字：“，
姓氏：“，
电话：“，
电邮：“，
没有人：“，
时间：“，
});
useffect（（）=>{
const _id=props.match.params.id；
日志（props.match.params.id）；
console.log（_id）；
get（config.API\u HOST\u ORIGINAL+`/adminbookings/`+\u id{
标题：{
“授权”：“承载者”+config.getToken（）
}
})。然后（res=>{
setData（res.data）
console.log（“记录的res数据：”，res.data）；
}).catch（err=>console.error（err））
}, []);
功能提交（e）{
e、 预防默认值（）；
Axios.post（config.API_HOST_ORIGINAL+/bookings/”{
标题：{
“授权”：“承载者”+config.getToken（）
}
})。然后（res=>{
console.log（res.data）；
常量myData=[…类别列表，res.data]
设置类别（myData）
}).catch（err=>console.error（err））
}
函数句柄（e）{
const newData={…data}
newData[e.target.\u id]=e.target.value；
setData（newData）；
}
**另一个文件：
这是我接受所有预订的地方**
常量预订=（道具）=>{
一些钩子。。。
函数更新（_id）{
log（“将此SHIIET记录到控制台”，_id）；
props.history.push（“/adminedit/”+_id）；
}
返回{
更新（预订编号）}
className=“btn btn主btn sm”>编辑
}
导出默认预订；

---

您应该使用

useparms

来自

react-router-dom

的钩子

您还应该在

useffect

导入{
useParams
}从“反应路由器dom”；
...
设{id}=useParams（）；
...
useffect（（）=>{
}, [])