React Router v6 路由未匹配问题：相对路径导致的路由失效解析

react router v6 中因 `` 使用相对路径，导致实际跳转为 `/products/products/123`，触发 “no routes found” 错误；正确做法是始终使用以 `/` 开头的绝对路径。

在 React Router v6 中， 组件的 to 属性默认按相对路径解析（类似浏览器中 的行为），而非基于根路由匹配。这意味着：若用户当前位于 /products 页面，而你在 ProductCard 中写的是：

<Link to={`products/${product.id}`}> {/* ❌ 相对路径 */}

Router 会将其解析为 /products/products/123（即在当前路径基础上拼接），而非预期的 /products/123。由于你的路由配置中仅声明了：

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

该路由只匹配形如 /products/123 的绝对路径，自然无法匹配 /products/products/123，最终渲染空白或触发 缺失/404 行为（v6 默认不报错，但组件不渲染——常被误认为 “No routes found”）。

✅ 正确解法：统一使用绝对路径（以 / 开头）

传声港

AI驱动的综合媒体服务平台，提供 “媒体发稿 + 自媒体宣发 + 效果监测” 一站式服务

下载

修改 ProductCard.jsx 中所有 to 值，确保路径从根开始：

// ✅ 正确：绝对路径，明确指向 /products/:id
<Link to={`/products/${product.id}`} className="relative">
  @@##@@
</Link>

<Link to={`/products/${product.id}`}>
  <h5 className="mb-2 text-2xl font-bold ...">{product.name}</h5>
</Link>

? 提示：/products/${product.id} 是绝对路径，无论当前 URL 是 /、/products 还是 /about，点击后都会精准导航至 /products/123，与路由定义完全一致。

? 额外验证建议（提升健壮性）：

1. 检查 ProductDetail 中 useParams() 是否正常取值
   在 useEffect 前添加防御性判断，避免 product.name 导致 useTitle(undefined) 报错：

   useTitle(product?.name || "Product Detail");

2. 为 ProductDetail 添加加载与错误状态
   当前代码未处理请求失败或空数据场景，易白屏：

   {Object.keys(product).length === 0 ? (
     <div className="text-center py-10">Loading...</div>
   ) : (
     /* 渲染逻辑 */
   )}

3. 确保 AllRoutes 已正确挂载到应用顶层
   检查 main.jsx 或 index.js 中是否包裹了 （v6.4+ 推荐）或 ，且 AllRoutes 是其子元素。

? 总结：React Router v6 的路径匹配严格依赖字符串精确匹配，相对路径是高频陷阱。养成习惯——所有 和 navigate() 调用均应以 / 开头，既符合语义（跳转到新页面），也彻底规避路径拼接歧义。这是从 v5 升级到 v6 最需警惕的 breaking change 之一。