match.params返回空，即使URL包含params

Question

我想在点击预订的特定ID时对表单进行编辑，以便将ID中的值传递到编辑表单。但即使URL包含参数，match.params也会返回空。我该如何解决这个问题？

这是我编辑的预订文件：

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;

记住这个警告！

Answer 1

您应该使用react-router-dom中的useParams挂钩。

此外，您应该在useEffect之外定义id

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