React中通过Link组件传递参数至其他组件失败求助

你的代码存在几个关键问题导致传参失败，按以下步骤修改即可解决：

1. 修复路由配置的语法错误与参数定义 #

App.js中的Route存在语法错误，且未定义参数占位符，修改为：

<Route path="/products_info/:name" element={<Product_info />} />

其中:name是用于接收产品名称的参数占位符。

2. 修改Productscard组件的Link传参逻辑 #

将Link的to属性改为带参数的动态路径，通过模板字符串传入产品名称：

<Link to={`/products_info/${props.name}`}>

另外注意你代码中的photo变量未定义，需确保它是通过props传入或有正确的赋值，比如改为props.photo。

3. 确保Product_info组件正确接收参数 #

确认已导入useParams钩子，否则无法获取路由参数：

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

之后params.name就能正常拿到传递过来的产品名称。

额外需求：传递更多参数（如产品描述） #

如果需要同时传递产品描述等更多信息，可选择以下两种方式：

方式一：路由多参数 #

修改路由配置：

<Route path="/products_info/:name/:description" element={<Product_info />} />

对应修改Link：

<Link to={`/products_info/${props.name}/${props.description}`}>

在Product_info中接收多参数：

const { name, description } = useParams();

方式二：通过Link的state属性传递（参数不显示在URL） #

路由配置无需修改，修改Link：

<Link 
  to="/products_info"
  state={{ name: props.name, description: props.description }}
>

在Product_info中通过useLocation接收：

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

function Product_info(props) {
  const location = useLocation();
  const { name, description } = location.state || {};

  return (
    <div className="product_info">
      <h1>{name}</h1>
      <p>{description}</p>
    </div>
  )
}

完成上述修改后，点击Productscard组件即可跳转到详情页并展示对应产品信息。

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