React中通过Link传参失败：商品详情页数据为null的解决方法

核心原因：React Router版本兼容问题 #

你当前使用的Link传参写法是React Router v5的格式，但如果项目是v6版本，这种写法无法正确传递state，导致详情页location.state始终为null。

解决方案：调整Link传参写法 #

1. 修改列表页（SustainabilityProducts.js）的Link组件 #

将原来的对象式to参数拆分为路径字符串和独立的state属性：

// 原代码
<Link to={{
  pathname: '/product-details', 
  state: { productTitle: card.productName }
}}>

// 修改后
<Link to="/product-details" state={{ productTitle: card.productName }}>

2. 验证路由配置（可选） #

确保路由配置中/product-details对应正确组件，且整体包裹在路由容器内：

// 示例路由配置（通常在App.js或index.js）
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import SustainabilityProducts from './path/to/SustainabilityProducts';
import ProductDetails from './path/to/ProductDetails';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/sustainability-products" element={<SustainabilityProducts />} />
        <Route path="/product-details" element={<ProductDetails />} />
      </Routes>
    </BrowserRouter>
  );
}

3. 处理页面刷新丢失state的情况（可选） #

state存储在内存中，刷新详情页会导致数据丢失。若需要持久化传参，可改用URL参数：

列表页修改：

<Link to={`/product-details?title=${encodeURIComponent(card.productName)}`}>

详情页修改：

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

function ProductDetails() {
  const [searchParams] = useSearchParams();
  const productTitle = searchParams.get('title');

  // ... 其余代码
}

额外检查点 #

确认API返回的card.productName有效，可在列表页添加日志验证：

{data.map((card) => {
  console.log('商品名称:', card.productName); // 检查是否有有效值
  return (
    <div className="cards" key={card.productId}>
      {/* Link组件 */}
    </div>
  )
})}

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