React中useNavigate传参导航失效，参数显示undefined求助

你的问题出在参数传递和获取的方式不匹配，以及React Router v6中组件无法直接通过props获取路由state，以下是具体修复步骤：

方案一：使用state传递参数（原方式修复） #

1. 修改Product组件，通过useLocation获取state
   React Router v6中，组件需要通过useLocation钩子来获取跳转时传递的state，而非直接从props读取：

   import { useLocation } from 'react-router-dom';
   
   export const Product = () => {
     const location = useLocation();
     // 用可选链避免跳转时未传state导致报错
     const productId = location.state?.id;
   
     return <div>当前商品ID：{productId}</div>;
   };
   

2. 跳转逻辑可以简化（可选）
   因为key和变量名相同，可简写为：

   const handleOpen = (id) => {
     navigate('/product', { state: { id } });
   };
   

方案二：使用路由参数传递（更推荐，刷新不丢失） #

如果需要刷新页面后参数仍保留，或者需要通过URL分享页面，建议用路由参数的方式：

1. 修改App.js的路由配置
   定义带参数的路由：

   <Route path='/product/:id' element={<Product />} />
   

2. 修改跳转逻辑
   直接将id拼接到URL中：

   const handleOpen = (id) => {
     navigate(`/product/${id}`);
   };
   

3. 修改Product组件，通过useParams获取参数

   import { useParams } from 'react-router-dom';
   
   export const Product = () => {
     const { id } = useParams();
   
     return <div>当前商品ID：{id}</div>;
   };
   

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