React跳转商品详情页ID正确但页面空白无内容如何解决？

核心问题点 #

• 1. React Router v6 路由配置错误：element 属性需要传入 JSX 元素，不能直接传入组件引用
• 2. 商品详情页数据类型不匹配：查询单个商品的接口返回的是对象，但你把 data 初始值设为数组，还用 map 遍历对象，自然不会渲染任何内容
• 3. 详情页 useEffect 缺少依赖项：如果后续路由参数变化不会触发重新请求，建议补充 params._id 作为依赖

修复代码 #

1. App.js 路由配置修改 #

// 原错误写法 element={SingleProduct} 改为传入JSX
<Route path='/SingleProduct/:_id' element={<SingleProduct />} />

2. 商品详情页 SingleProduct 组件修改 #

import { useState, useEffect } from 'react';
import {useParams} from 'react-router-dom';
import axios from 'axios';

const SingleProduct = () => {
  // 初始值改为null，匹配单个商品对象类型
  const [data, setData] = useState(null);
  const params = useParams();

  // 补充params._id作为依赖项
  useEffect(() => {
    fetchProduct();
  }, [params._id]);

  const fetchProduct = () => {
    axios
      .get(`http://localhost:5000/api/products/${params._id}`)
      .then((res) => {
        setData(res.data);
        console.log(res.data);
      })
      .catch((err) => console.log(err))
  };

  // 判断data存在后直接渲染，无需map遍历
  return (
    <div>
      {data && (
        <div className='product-container' key={data._id}>
          <div>
            <img className='prod-image' src={data.imageUrl} alt='' />
          </div>
          <div>
            <h1 className='brand'>{data.name}</h1>
            <h2>{data.price}</h2>
            <p>{data.description}</p>
            <p>
              <strong>ID:</strong> {data._id}
            </p>
            <p>
              <strong>Color:</strong> {data.color}
            </p>
          </div>
        </div>
      )}
    </div>
  );
}
export default SingleProduct;

如果修复后仍有问题，可以打开浏览器控制台检查接口请求是否报错，确认后端返回的是正确的单个商品对象结构即可。

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