React.js中如何按类别展示商品

1. 检查前端路由配置 #

• 确认是否为分类商品页面配置了带参数的路由规则，以React Router为例：

  // 错误示例：缺少分类ID参数占位符
  <Route path="/category" element={<CategoryProducts />} />
  // 正确示例：添加参数占位符匹配分类ID
  <Route path="/category/:categoryId" element={<CategoryProducts />} />
  

• 检查路由跳转时是否正确传递分类参数：

  // 错误示例：未携带分类ID
  navigate('/category');
  // 正确示例：拼接分类ID到路径中
  navigate(`/category/${category._id}`);
  

2. 验证后端接口路由 #

• 确认后端（如Express）是否配置了对应分类商品的接口：

  // 正确示例：接收分类ID参数并查询商品
  app.get('/api/products/category/:categoryId', async (req, res) => {
    const { categoryId } = req.params;
    const products = await Product.find({ category: categoryId });
    res.json(products);
  });
  

• 直接在浏览器或Postman访问http://localhost:5000/api/products/category/[你的分类ID]，验证接口是否能正常返回商品数据。

3. 核对请求路径一致性 #

• 前端请求商品数据时，确保URL和后端接口路径完全匹配：

  // 错误示例：路径缺少分类ID参数
  fetch(`http://localhost:5000/api/products/category`)
  // 正确示例：携带分类ID参数请求
  fetch(`http://localhost:5000/api/products/category/${categoryId}`)
  

4. 调整路由匹配顺序 #

• 前端路由中，需将带参数的具体路由（如分类商品路由）放在通配符路由（如404页面）之前，避免被提前拦截：

  // 正确的路由顺序
  <Routes>
    <Route path="/category/:categoryId" element={<CategoryProducts />} />
    <Route path="*" element={<NotFound />} />
  </Routes>
  

5. 确认组件参数接收逻辑 #

• 分类商品页面组件需正确接收路由参数，比如React中使用useParams：

  import { useParams } from 'react-router-dom';
  
  function CategoryProducts() {
    const { categoryId } = useParams();
    // 使用categoryId发起商品数据请求
  }
  

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