反应匹配未定义

Question

我有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, 哪里错了？

Answer 1

也许您错误地定义了路线...这应该有效：

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

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

Answer 2

尝试使用 useParams 钩子检索 id:

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

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

反应匹配未定义

React match is undefined

reactjs

react-redux