React中实现动态商品筛选页：点击分类跳转至对应商品页

先修正你代码里的小问题 #

每个onClick的箭头函数括号没闭合，比如onClick={()=>{filter('women')}}才是正确写法，否则会触发语法错误。

分场景实现filter函数 #

场景1：单页应用（基于React Router v6+）

这是现在React项目最常用的方式，通过路由跳转传递分类参数，再在目标页面请求对应API数据。

1. Header组件里的filter函数实现

引入useNavigate钩子，点击分类时跳转到商品列表页并携带分类参数：

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

function Header() {
  const navigate = useNavigate();

  const filter = (category) => {
    // 跳转到商品列表页，把分类作为路由参数
    navigate(`/products/${category}`);
  };

  return (
    <div className="category-list">
      <span className="category" onClick={()=>{filter('men')}}>Men </span>
      <span className="category" onClick={()=>{filter('women')}}>Women </span>
      <span className="category" onClick={()=>{filter('electronics')}}>Electronics </span>
      <span className="category" onClick={()=>{filter('beauty')}}>Beauty / Health </span>
      <span className="category" onClick={()=>{filter('accessories')}}>Accessories </span>
    </div>
  );
}

2. 商品列表页（ProductsPage）获取分类并请求API

在专门展示商品的页面，用useParams拿到路由里的分类参数，再调用API获取对应商品：

import { useParams, useEffect, useState } from 'react';

function ProductsPage() {
  const { category } = useParams();
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchCategoryProducts = async () => {
      try {
        // 替换成你的真实API地址
        const res = await fetch(`/api/products?category=${category}`);
        const data = await res.json();
        setProducts(data);
      } catch (err) {
        console.error('加载商品失败：', err);
      } finally {
        setLoading(false);
      }
    };

    if (category) fetchCategoryProducts();
  }, [category]);

  if (loading) return <div>加载中...</div>;

  return (
    <div className="products-container">
      {products.map(item => (
        <div key={item.id} className="product-card">
          <img src={item.image} alt={item.name} />
          <h3>{item.name}</h3>
          <p>${item.price}</p>
        </div>
      ))}
    </div>
  );
}

3. 配置路由

在路由配置文件里添加商品列表页的路由规则：

import { Routes, Route } from 'react-router-dom';
import Header from './Header';
import ProductsPage from './ProductsPage';

function App() {
  return (
    <div className="app">
      <Header />
      <Routes>
        {/* 其他路由... */}
        <Route path="/products/:category" element={<ProductsPage />} />
      </Routes>
    </div>
  );
}

场景2：传统多页应用

如果是非单页的传统项目，直接通过URL跳转并携带分类参数：

function Header() {
  const filter = (category) => {
    // 跳转到商品列表页面，把分类作为URL参数
    window.location.href = `/products.html?category=${category}`;
  };

  // 分类按钮代码同之前，略
}

然后在products.html的脚本里获取参数并请求API：

window.addEventListener('DOMContentLoaded', () => {
  const params = new URLSearchParams(window.location.search);
  const category = params.get('category');

  if (category) {
    fetch(`/api/products?category=${category}`)
      .then(res => res.json())
      .then(data => {
        const container = document.querySelector('.products-container');
        data.forEach(item => {
          const card = document.createElement('div');
          card.className = 'product-card';
          card.innerHTML = `
            <img src="${item.image}" alt="${item.name}" />
            <h3>${item.name}</h3>
            <p>$${item.price}</p>
          `;
          container.appendChild(card);
        });
      })
      .catch(err => console.error('加载商品失败：', err));
  }
});

内容的提问来源于stack exchange，提问作者bagewadi-akram