反应匹配未定义答案

【问题标题】：React match is undefined反应匹配未定义
【发布时间】：2021-12-10 13:05:02
【问题描述】：

我有 app.js 和

...
<Route path="/order/:id" element={<OrderScreen />}><Route>
...

在屏幕中OrderScreen.js：

function OrderScreen({match}){
const dispatch = useDispatch()
useEffect(() => {
dispatch (listOrderDetails(match.params.id))
}, [])
}
........

在我的行动中：

.....
export const listOrderDetails = (id) => async (dispatch) => {
try{
   dispatch ({type: ORDER_DETAILS_REQUEST})
   const {data} = await axios.get(`localhost:8000/api/order/${id}`)
......

还有 django urlpatterns:

path('order/<str:pk>/', views.getOrder, name='order')

但是有一个错误match is undefined，哪里错了？

【问题讨论】：

标签： reactjs react-redux

【解决方案1】：

尝试使用useParams 挂钩来检索id：

import { useParams } from 'react-router-dom';

function OrderScreen() {
  const dispatch = useDispatch();
  const { id } = useParams();
  
  useEffect(() => {
    dispatch(listOrderDetails(id));
  }, []);
}

【讨论】：

【解决方案2】：

也许您错误地定义了路线...这应该可以工作：

<Route path="/order/:id" component={OrderScreen} />

请参阅 Redux 上的入门文档以了解最少的用法：https://redux.js.org/tutorials/essentials/part-4-using-data#adding-the-single-post-route

【讨论】：