Angular路由在4个组件间导航失效问题求助

首先看你的报错日志：Cannot match any routes. URL Segment: '%5B/about%5D'，这里的%5B和%5D是方括号[和]的URL编码，说明你的routerLink写法完全错了——你把属性绑定的语法当成字符串写了，导致浏览器把整个[/about]当成了URL路径的一部分，自然匹配不上你定义的about路由。

第一步：修正HTML中的routerLink语法 #

你现在的写法是错误的，正确的写法有两种：

写法1：直接用字符串路径（适合静态路径） #

<header>
  <nav>
    <ul>
      <li><a routerLink="/">Home</a></li>
      <li><a routerLink="/about">About Us</a></li> <!-- 修正语法+拼写错误 -->
      <li><a routerLink="/products">Products</a></li> <!-- 修正拼写错误 -->
      <li><a routerLink="/contacts">Contact Us</a></li> <!-- 修正拼写错误 -->
    </ul>
  </nav>
</header>
<router-outlet></router-outlet>

写法2：使用属性绑定的数组形式（适合动态路径，比如带参数的场景） #

如果需要动态生成路径，才用方括号包裹数组（这是Angular的属性绑定语法，里面是JavaScript表达式）：

<li><a [routerLink]="['/about']">About Us</a></li>

第二步：清理app.module.ts中的冗余配置 #

你的路由配置里重复定义了about路径，这会造成不必要的冗余，建议删除重复项：

const appRoutes:Routes=[
  {path:'', component : HomeComponent},
  {path:'about', component : AboutsComponent},
  {path:'contacts', component : ContactUsComponent},
  {path:'products', component : ProductComponent},
  // 删掉下面这行重复的路由配置
  // {path:'about', component : AboutsComponent}
]

另外，你同时导入了AppRoutingModule和RouterModule.forRoot(appRoutes)，这可能会引发路由冲突。建议统一配置位置：

• 要么把appRoutes移到app-routing.module.ts中，然后在AppModule的imports里只保留AppRoutingModule，删掉RouterModule.forRoot(appRoutes)；
• 要么删掉AppRoutingModule的导入，只保留RouterModule.forRoot(appRoutes)。

第三步：验证组件与路由的对应关系 #

确认你的组件类名和路由配置的对应关系是正确的：

• AboutsComponent对应路径about（没问题）
• ContactUsComponent对应路径contacts（没问题）
• ProductComponent对应路径products（没问题）

最后，重启Angular开发服务器，清除浏览器缓存，再测试导航功能应该就能正常工作了。

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