React.js 嵌套路由实现电商站点分类模块内部导航的咨询

针对你提到的分类下内部路由需求，结合React Router的特性，推荐两种成熟的实现方案，你可以根据项目后续扩展需求选择：

方案1：嵌套路由（最适配你当前的Nike站场景） #

这是React Router v6官方推荐的同布局多内容场景实现方案，优势是可以复用顶部导航、分类侧边栏等公共模块，不需要重复编写公共布局代码：

• 首先配置路由层级，父级路由承载分类页公共布局，子路由对应具体分类内容：

// 路由配置示例
import { createBrowserRouter, Outlet } from 'react-router-dom'

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />, // 全局公共布局，包含顶部主导航
    children: [
      { index: true, element: <HomePage /> },
      {
        path: 'category',
        element: <CategoryLayout />, // 分类页公共布局，可固定展示全部分类的子分类导航
        children: [
          { index: true, element: <AllCategory /> },
          { 
            path: 'shoes', 
            element: <ShoesPage />,
            // 还可继续嵌套鞋类下的子分类路由
            children: [
              { index: true, element: <AllShoesList /> },
              { path: 'running', element: <RunningShoesList /> },
              { path: 'basketball', element: <BasketballShoesList /> }
            ]
          },
          { path: 'clothing', element: <ClothingPage /> }
        ]
      }
    ]
  }
])

• 在CategoryLayout组件中预留<Outlet />插槽，子路由的内容会自动渲染到插槽位置，点击不同分类只会替换插槽内容，不会刷新整个页面。
• 主分类导航直接用Link组件跳转即可：<Link to="/category/shoes">SHOES</Link>。

方案2：动态路由参数（适合分类数量多的扩展场景） #

如果后续你的分类数量超过10个，不想逐个写死路由配置，可以用动态参数匹配的方式实现：

• 路由配置简化为单条动态规则：

{
  path: 'category/:categoryId',
  element: <CategoryPage />
}

• 在分类页组件中通过useParams钩子拿到当前分类标识，动态拉取对应分类的子分类、商品数据渲染即可：

import { useParams, Link } from 'react-router-dom'

function CategoryPage() {
  const { categoryId } = useParams()
  const [categoryData, setCategoryData] = useState(null)

  // 分类ID变化时拉取对应数据
  useEffect(() => {
    // 调用你的商品分类接口，传入categoryId获取对应数据
    getCategoryData(categoryId).then(res => setCategoryData(res))
  }, [categoryId])

  if (!categoryData) return <Loading />

  return (
    <div className="category-page">
      {/* 渲染当前分类的子分类导航 */}
      <div className="sub-category-nav">
        {categoryData.subCategories.map(item => (
          <Link key={item.id} to={`/category/${categoryId}/${item.id}`}>
            {item.name}
          </Link>
        ))}
      </div>
      {/* 渲染当前分类的商品列表 */}
      <ProductList list={categoryData.productList} />
    </div>
  )
}

适配你项目的选择建议 #

你当前的项目分类数量少，优先选嵌套路由方案，路由语义更清晰，调试也更方便。如果后续分类扩展到几十个，再切换成动态参数方案成本也很低。

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