React Router v6 URL参数获取与路由报错问题求助

正在将基于React Router v5的电商教程重构为v6版本，开发订单详情页时，点击“Place Order”按钮后出现报错：“匹配到位置"/order/34"的叶子路由没有element，默认会渲染空页面”。

1. 修复路由配置错误（解决空页面报错） #

React Router v6彻底废弃了v5中<Route>的component/render属性，统一使用element属性传递组件实例。你的路由写法仍停留在v5规范，导致路由无法找到渲染元素。

修改App.js中的路由配置：

// 错误写法（v5）
<Route path='/order/:id' component={<OrderScreen/>} />

// 正确写法（v6）
<Route path='/order/:id' element={<OrderScreen />} />

2. 正确从URL获取订单ID（替换v5的match参数） #

React Router v6移除了组件props中的match对象，需通过useParams钩子获取URL动态参数。

修改OrderScreen.js：

// 1. 确保已导入useParams
import { useParams } from 'react-router-dom'

// 2. 移除组件参数中的{match}
function OrderScreen() {
  // 3. 使用useParams获取订单ID
  const { id: orderId } = useParams()

  // ... 其余逻辑代码保持不变
}

你代码中存在一个违反Redux immutable原则的问题：在组件顶层直接修改Redux store中的order.itemsPrice。建议改为渲染时计算：

// 替换原直接赋值逻辑
const itemsPrice = order?.orderItems?.reduce((acc, item) => acc + item.price * item.qty, 0).toFixed(2) || '0.00'

// 后续JSX中使用{itemsPrice}替代{order.itemsPrice}

内容的提问来源于stack exchange，提问作者Myrodis