React-Router-Dom v6子页面路由匹配问题（v5迁移）

问题核心 #

你遇到的问题是React Router v6的嵌套路由规则和v5完全不同：v6中组件内的Routes默认基于当前路由路径做相对匹配，而非v5中Switch的绝对路径匹配；同时父路由的路径结构需要和子路由的相对路径配合，才能正确命中规则。

具体修改步骤 #

1. 调整外层路由结构 #

外层路由只匹配到/abc/product/:skuType，把skuPage的匹配逻辑交给子路由处理，这样结构更清晰：

<Route
  path="/abc/product/:skuType"
  element={
    <PrivateRoute>
      <ProductRoutesStructure />
    </PrivateRoute>
  }
/>

2. 修改子路由配置（ProductRoutesStructure） #

将子路由改为相对路径，利用v6支持的参数正则匹配规则，精准匹配skuPage的有效值：

export const ProductRoutesStructure = () => (
  <Routes key="productRoutes">
    {/* 相对路径，匹配 /abc/product/:skuType/converse */}
    <Route
      path={`/:skuPage(${Types.CONVERSE})`} 
      element={<SneakerPage />}
    />
    {/* 相对路径，匹配 /abc/product/:skuType/pants */}
    <Route
      path={`/:skuPage(${Types.PANTS})`} 
      element={<PantsPage />}
    />
    {/* 匹配所有未命中的情况：包括 /abc/product/:skuType 本身，以及其他skuPage值 */}
    <Route path="*" element={<GenericPage />} />
  </Routes>
);

3. 在子组件中获取参数 #

通过useParams()钩子直接获取skuType和skuPage参数，用于API调用：

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

const SneakerPage = () => {
  const { skuType, skuPage } = useParams();
  
  // 调用API逻辑示例
  useEffect(() => {
    fetch(`/api/products/${skuType}/${skuPage}`)
      .then(res => res.json())
      .then(data => {/* 处理返回数据 */});
  }, [skuType, skuPage]);
  
  return <div>...</div>;
};

原写法失效原因 #

你之前在子路由中使用了完整的绝对路径（/abc/product/:skuType/:skuPage(...)），但外层路由已经占用了/abc/product/:skuType/:skuPage?路径，v6的Routes会优先匹配外层路由，导致子路由的绝对路径无法命中，最终只能匹配通配符路由。

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