点击编辑指定产品时页面显示空白的技术问题求助

核心原因：路由路径不匹配 #

你的viewProduct.js中编辑跳转的路径使用了下划线：

<Link to={`/admin/add_product/${id}`}>
  <FaEdit size={20} color="green" />
</Link>

但admin.jsx中配置的路由是连字符格式：

<Route path="/add-product/:id" element={<AddProduct />} />

路径中的add_product与add-product不匹配，导致路由无法找到对应组件，直接显示空白页面。

修复步骤 #

修改viewProduct.js中的跳转路径，将下划线改为连字符：

<Link to={`/admin/add-product/${id}`}>
  <FaEdit size={20} color="green" />
</Link>

额外优化建议 #

1. 处理产品未找到的情况 #

当Redux中产品数据未加载完成，或找不到对应ID的产品时，productEdit会返回undefined，导致组件初始化状态异常。可以调整状态初始化逻辑：

const [product, setProduct] = useState(() => {
  if (id === "ADD") {
    return {...initialState};
  }
  // 找不到对应产品时返回初始状态，避免渲染报错
  return productEdit ? {...productEdit} : {...initialState};
});

2. 增加数据加载判断 #

在组件开头添加判断，确保产品数据加载完成后再渲染内容：

const products = useSelector(selectProducts);
if (!products) {
  return <Loader />;
}

3. 优化图片字段必填规则 #

编辑产品时，若用户不想更换图片，当前的required属性会强制重新上传，建议修改为：

<input
  type="file"
  className="custom-file-input"
  id="productImage"
  placeholder="Product Image"
  name="imageURL"
  onChange={(e) => handleImageChange(e)}
  // 仅添加新产品时要求必填图片
  required={id === "ADD"}
/>

内容的提问来源于stack exchange，提问作者Cable-Nerd