React电商网站路由页面导航及多级路由配置问题咨询

看起来你当前的路由结构有点混乱，没法实现你想要的「首页→分类→商品类型→商品详情」多级导航逻辑，我来帮你梳理并修正一下：

一、先修正路由层级结构 #

你现在把Men、Children嵌套在Women路由下是错误的，它们应该是Products的同级子路由。另外，每个分类（Women/Men/Children）下面需要再嵌套具体的商品类型路由，最后再加上商品详情的动态路由。修正后的App组件路由配置如下：

export default function App() {
  return (
    <div>
      <Router>
        <Navbar />
        <Routes>
          {/* 首页路由 */}
          <Route path="/" element={<Homes />} />
          
          {/* 商品主路由，嵌套所有分类路由 */}
          <Route path="products" element={<Products />}>
            {/* 女装分类路由，嵌套女装下的商品类型和详情页 */}
            <Route path="women">
              {/* 女装首页，展示skirt、jeans等入口 */}
              <Route index element={<Women />} />
              {/* 女装下的裙子列表页 */}
              <Route path="skirt" element={<SkirtList />} />
              {/* 女装下的牛仔裤列表页 */}
              <Route path="jeans" element={<JeansList />} />
              {/* 女装商品详情页，动态id参数 */}
              <Route path=":productId" element={<ProductDetail />} />
            </Route>
            
            {/* 男装分类路由，同理 */}
            <Route path="men">
              <Route index element={<Men />} />
              <Route path="pants" element={<PantsList />} />
              {/* 其他男装商品类型路由 */}
              <Route path=":productId" element={<ProductDetail />} />
            </Route>
            
            {/* 童装分类路由，同理 */}
            <Route path="children">
              <Route index element={<Children />} />
              {/* 童装下的商品类型路由，比如shoes等 */}
              <Route path="shoes" element={<ChildrenShoesList />} />
              <Route path=":productId" element={<ProductDetail />} />
            </Route>
          </Route>
        </Routes>
        <Footer />
      </Router>
    </div>
  )
}

二、组件职责调整 #

1. Homes组件：这里只需要放首页的分类入口（Women、Men、Children的图片/链接），不需要直接嵌套分类组件，避免页面内容重复渲染：

export default function Homes () {
  return (
    <div className="home">
      {/* 首页的分类入口，点击跳转到对应分类的首页 */}
      <Link to="/products/women">
        <img src="women-category-img.jpg" alt="女装" />
      </Link>
      <Link to="/products/men">
        <img src="men-category-img.jpg" alt="男装" />
      </Link>
      <Link to="/products/children">
        <img src="children-category-img.jpg" alt="童装" />
      </Link>
    </div>
  )
}

2. Products组件：作为所有商品路由的布局容器，Outlet会渲染当前匹配的子路由内容（比如Women首页、Skirt列表页等），导航部分保持不变：

export default function Products() {
  return (
    <div className="products">
      <div className="productsNav">
        <Link to="/products/women">女装</Link>
        <Link to="/products/men">男装</Link>
        <Link to="/products/children">童装</Link>
      </div>
      {/* 渲染子路由的内容 */}
      <Outlet />
    </div>
  );
}

3. 分类组件（比如Women）：放置该分类下的具体商品类型入口，比如裙子、牛仔裤的图片/链接：

export default function Women() {
  return (
    <div className="women-category">
      <Link to="/products/women/skirt">
        <img src="skirt-img.jpg" alt="裙子" />
      </Link>
      <Link to="/products/women/jeans">
        <img src="jeans-img.jpg" alt="牛仔裤" />
      </Link>
    </div>
  )
}

4. 商品列表组件（比如SkirtList）：展示该类型下的所有商品，每个商品点击跳转到详情页：

export default function SkirtList() {
  // 假设这里有裙子数据
  const skirts = [
    { id: 1, name: "夏季碎花裙", img: "skirt-1.jpg" },
    { id: 2, name: "牛仔短裙", img: "skirt-2.jpg" }
  ];
  
  return (
    <div className="skirt-list">
      {skirts.map(skirt => (
        <Link key={skirt.id} to={`/products/women/${skirt.id}`}>
          <img src={skirt.img} alt={skirt.name} />
          <p>{skirt.name}</p>
        </Link>
      ))}
    </div>
  )
}

5. 商品详情组件（ProductDetail）：通过useParams获取动态路由的productId，根据id展示对应商品的详情：

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

export default function ProductDetail() {
  const { productId } = useParams();
  
  // 根据productId获取对应商品的数据，这里可以模拟或者请求接口
  const product = getProductById(productId); // 假设这是获取商品数据的函数
  
  return (
    <div className="product-detail">
      <img src={product.img} alt={product.name} />
      <h2>{product.name}</h2>
      <p>{product.description}</p>
      <p>价格：{product.price}</p>
    </div>
  )
}

三、关键逻辑说明 #

• 路由层级：采用「首页→商品主页面→分类首页→商品类型列表→商品详情」的层级，符合电商网站的常规导航逻辑。
• 动态路由：用:productId匹配商品详情页，不管是女装、男装还是童装的商品，都可以复用同一个ProductDetail组件，只需要根据id区分数据即可。
• Outlet的使用：Products组件里的Outlet负责渲染子路由内容，保持顶部导航栏的一致性，不用在每个分类组件里重复写导航。

调整后就能实现你想要的导航流程：

首页点击女装 → 进入女装分类首页 → 点击裙子 → 进入裙子列表页 → 点击某条裙子 → 进入该裙子的详情页

男装和童装的流程也是一样的。

备注：内容来源于stack exchange，提问作者mkty