React中useParams()获取URL参数返回undefined问题排查

我维护一个法语订单管理应用，其中“Commandes”（订单）列表以表格形式展示，每行设有跳转按钮，点击后进入详情组件查看订单详情。实现逻辑为：通过useParams传递订单ID（字段名为No），再调用后端接口获取完整订单数据。

当前问题：源组件已正确传递No，路由配置完成，跳转后URL中可见该参数，但目标组件通过useParams获取No时返回undefined。

相关代码片段 #

1. 源组件跳转按钮：

<td>
  <IconButton
    variant="outlined"
    color="error"
    style={{ color: "#02047a" }}
    onClick={() => handleDetailsClick(ligne.No)}>
    <LoupeOutlinedIcon />
  </IconButton>
</td>

2. 跳转处理函数：

const history = useHistory();
const handleDetailsClick = (No) => {  
  history.push(`/components/blocks/Hero/DetailsCommande/${No}`);
};

3. 路由配置（独立文件）：

DetailsCommande: {
  name: "Details commandes",
  component: DetailsCommande,
  url: "/components/blocks/Hero/DetailsCommande/:No",
},

4. 目标组件参数获取逻辑：

const { No } = useParams();
console.log(No); // 输出undefined

const fetchCommandeData = async (paramOrderNo) => {
  try {
    const response = await axios.get("/commande/details", {
      params: { No: paramOrderNo },
    });
    const responseLigne = await axios.get("/commande/getLignes", {
      params: { cmdNo: paramOrderNo },
    });

    setCommandeData(response.data);
    setLigneCommandeData(responseLigne.data);
  } catch (error) {
    console.error("Error:", error);
  }
};

React.useEffect(() => {
  if (No) {
    fetchCommandeData(No);
  }
}, [No]);

排查与修复方案 #

1. 检查路由参数大小写匹配 #

React Router的路由参数大小写敏感，确认路由配置中的:No（首字母大写）与目标组件解构的const { No } = useParams()完全一致。如果路由配置中写的是:no（小写），则解构时必须用no。

2. 确认路由实际渲染路径 #

检查App.js中是否正确将路由配置映射为React Router的Route组件：

• React Router v5：确保使用path={DetailsCommande.url}和component={DetailsCommande}：

  <Route path={DetailsCommande.url} component={DetailsCommande} />
  

• React Router v6：需改用element属性，并包裹在Routes组件内：

  <Routes>
    <Route path={DetailsCommande.url} element={<DetailsCommande />} />
  </Routes>
  

3. 验证传递的参数是否有效 #

在源组件的handleDetailsClick函数中添加日志，确认传递的No不是undefined：

const handleDetailsClick = (No) => {  
  console.log("传递的订单No:", No); // 确认参数存在
  history.push(`/components/blocks/Hero/DetailsCommande/${No}`);
};

4. 确保目标组件由路由直接渲染 #

只有被React Router直接渲染的组件才能通过useParams获取参数。如果目标组件是作为子组件嵌套在其他非路由组件中，需通过props传递参数，或使用useMatch钩子获取参数：

const match = useMatch("/components/blocks/Hero/DetailsCommande/:No");
const No = match?.params?.No;

5. 检查React Router版本兼容性 #

确保安装的react-router-dom版本与代码写法匹配：v5使用useParams需配合BrowserRouter和Route的component属性；v6则需使用Routes和element属性。

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