Angular路由URL段无效：导航至Participant组件时出错

你的问题出在路由导航的参数传递格式上：

• 错误原因
  你当前使用的this.router.navigate(['participant', {id: data.id}])，Angular会把第二个参数{id: data.id}解析成矩阵参数（即URL里的;id=1001格式），但你的子路由配置的是路径参数participant/:id，两者格式不匹配，因此无法正确导航。

• 正确写法
  对于路径参数，直接把参数值放在路由数组的对应位置即可：

  this.router.navigate(['participant', data.id]);
  

  这样Angular会生成符合路由配置的URL（基于当前路由上下文，最终路径为participants/participant/1001），能正确匹配子路由的participant/:id规则。

• 额外说明
  你的子路由配置participant/:id本身是正确的，只要导航时传递参数的格式和路由规则对应，就能正常跳转。如果是需要使用矩阵参数（非路径的附加参数），才需要把路由配置改成{path: 'participant', component: ParticipantComponent}，但显然你的场景是路径参数，所以用上面的写法即可解决问题。

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