Angular 17中routerLink失效求助：商品详情页路由匹配失败

问题根源 #

你的routerLink路径构造错误，导致生成了无法匹配的URL。当前代码[routerLink]="['/', product.id]"会生成根路径开头的URL（比如/9818011），但你的路由配置中并没有根路径下直接匹配:id的规则，因此触发NG04002错误。

解决方案 #

有两种正确的路径构造方式：

1. 相对路径（推荐） #

由于商品列表组件已经处于/app/products路由下，使用相对路径会自动基于当前路由拼接，写法如下：

<a [routerLink]="['.', product.id]" style="display: inline-block;" class="mx-1">
  <!-- 自定义内容 -->
</a>

• '.'表示当前路由层级，最终会生成/app/products/{product.id}的正确路径。

2. 绝对路径 #

如果需要明确指定完整路径，直接写全路由层级：

<a [routerLink]="['/app/products', product.id]" style="display: inline-block;" class="mx-1">
  <!-- 自定义内容 -->
</a>

额外验证 #

你的路由配置本身是正确的：

• 商品模块的空路径对应列表页，:id路径对应详情页
• 布局路由中已将products路径指向商品模块
• 主路由也正确挂载了布局模块

修改routerLink后即可正常跳转到商品详情页。

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