求助：React Router v5转v6写法时使用useParams遇到问题

问题根源 #

你的代码有两个核心问题导致无法正常运行：

• React Router v6 废弃了<Route>的component属性，改用element属性传入组件实例
• 函数组件中无需再接收match参数，且要确保正确导入并使用useParams

修正后的完整代码 #

1. 重构DishWithId组件

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

const DishWithId = () => {
  // 直接解构获取路由参数，无需match
  const { dishId } = useParams();
  const parsedId = parseInt(dishId, 10);

  // 用find替代filter[0]，更高效且语义化
  const targetDish = DISHES.find(dish => dish.id === parsedId);
  const targetComments = COMMENTS.filter(comment => comment.dishId === parsedId);

  return (
    <DishDetail dish={targetDish} comments={targetComments} />
  );
};

2. 更新Route配置

注意：v6中所有<Route>必须包裹在<Routes>组件内（替代v5的<Switch>）

import { Routes, Route } from 'react-router-dom';

// 路由配置部分
<Routes>
  {/* 用element属性传入组件JSX，而非component */}
  <Route path='/menu/:dishId' element={<DishWithId />} />
  {/* 其他路由规则... */}
</Routes>

额外优化点 #

• 解构useParams()的返回值，代码更简洁
• 使用Array.find()替代filter()[0]，避免创建冗余数组，提升性能
• 提前解析路由参数为数字，避免重复执行parseInt

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