在ReactJS中如何通过React Router实现点击分性别服装图片跳转至对应产品页？

1. 安装React Router #

如果还没安装，终端执行以下命令：

npm install react-router-dom

2. 配置全局路由 #

在根组件（比如App.js）里设置路由规则，关联分类页、男装产品页、女装产品页：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import CategoryPage from './CategoryPage';
import MaleProducts from './MaleProducts';
import FemaleProducts from './FemaleProducts';

function App() {
  return (
    <Router>
      <Routes>
        {/* 分类选择首页 */}
        <Route path="/" element={<CategoryPage />} />
        {/* 男装产品列表页 */}
        <Route path="/male-products" element={<MaleProducts />} />
        {/* 女装产品列表页 */}
        <Route path="/female-products" element={<FemaleProducts />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 分类页实现跳转逻辑 #

在CategoryPage.js中，用Link组件包裹分类图片，点击即可跳转到对应产品列表页：

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

const CategoryPage = () => {
  return (
    <div style={{ display: 'flex', gap: '20px', padding: '20px' }}>
      <Link to="/male-products">
        <img src="/male-category.jpg" alt="男装" style={{ width: '300px', height: 'auto' }} />
      </Link>
      <Link to="/female-products">
        <img src="/female-category.jpg" alt="女装" style={{ width: '300px', height: 'auto' }} />
      </Link>
    </div>
  );
};

export default CategoryPage;

4. 产品列表页渲染对应分类产品 #

以MaleProducts.js为例，用你已有的map循环渲染男装产品：

// 替换成你的真实男装产品数据
const maleProducts = [
  { id: 1, name: "纯棉男士T恤", img: "/male-tshirt-1.jpg" },
  { id: 2, name: "修身牛仔裤", img: "/male-jeans-1.jpg" },
  { id: 3, name: "休闲夹克", img: "/male-jacket-1.jpg" }
];

const MaleProducts = () => {
  return (
    <div style={{ padding: '20px' }}>
      <h2>男装产品</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '20px' }}>
        {maleProducts.map(product => (
          <div key={product.id} style={{ border: '1px solid #eee', padding: '10px' }}>
            <img src={product.img} alt={product.name} style={{ width: '100%', height: '200px', objectFit: 'cover' }} />
            <p>{product.name}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default MaleProducts;

FemaleProducts.js直接复用上述逻辑，替换为女装产品数据即可。

可选：添加单个产品详情页 #

如果需要点击产品查看详情，可补充以下配置：

1. 在App.js的Routes中新增路由：

<Route path="/product/:id" element={<ProductDetail />} />

2. 在产品列表页中，用Link包裹单个产品卡片：

<Link to={`/product/${product.id}`}>
  <div key={product.id} style={{ border: '1px solid #eee', padding: '10px' }}>
    <img src={product.img} alt={product.name} style={{ width: '100%', height: '200px', objectFit: 'cover' }} />
    <p>{product.name}</p>
  </div>
</Link>

3. 编写ProductDetail.js组件获取并展示产品详情：

import { useParams } from 'react-router-dom';
// 合并所有产品数据，或从接口/状态中获取
const allProducts = [...maleProducts, ...femaleProducts];

const ProductDetail = () => {
  const { id } = useParams();
  const product = allProducts.find(item => item.id === parseInt(id));

  if (!product) return <div>找不到该产品</div>;

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <img src={product.img} alt={product.name} style={{ width: '100%', height: '400px', objectFit: 'contain' }} />
      <h1>{product.name}</h1>
      {/* 补充产品价格、描述等详情内容 */}
    </div>
  );
};

export default ProductDetail;

内容的提问来源于stack exchange，提问作者Chris Van Gewden