React匹配未定义

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-urlpatters:

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

但是存在一个错误匹配未定义，错误在哪里？

Answer 1

尝试使用useParams挂钩检索id:

import { useParams } from 'react-router-dom';
function OrderScreen() {
const dispatch = useDispatch();
const { id } = useParams();

useEffect(() => {
dispatch(listOrderDetails(id));
}, []);
}

Answer 2

也许您定义的路由错误。。。这应该有效：

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

请参阅Redux上的入门文档以了解最低使用量：https://redux.js.org/tutorials/essentials/part-4-using-data#adding-单一后路线