为什么我的Angular RESTful路由总是重定向到默认路由？

核心问题原因 #

你当前配置了HashLocationStrategy哈希路由模式，该模式下所有Angular管控的路由路径都会挂载在地址的#符号之后，你直接访问http://localhost:4200/user/myusername时，Angular识别到的路由路径为空，所以会跳转至根路由#/，自然匹配不到user/:username规则。

两种解决方法 #

方案1：继续使用哈希路由模式 #

直接调整访问路径为 http://localhost:4200/#/user/myusername 即可正常触发UserComponent渲染，路径参数username也可以通过ActivatedRoute正常获取。

方案2：切换为不带#的HTML5历史路由模式（符合常规RESTful路径风格） #

需要修改两处配置：

1. 修改src/app/app.module.ts的providers配置，替换路由策略：

// 首先从@angular/common导入PathLocationStrategy
import { PathLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
  // ... 其他配置保持不变
  // 将原来的HashLocationStrategy替换为以下配置，也可以直接删除providers中的LocationStrategy相关声明，Angular默认使用PathLocationStrategy
  providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}],
})
export class AppModule { }

2. 确认src/app/app-routing.module.ts中路由配置未开启哈希模式：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })], // useHash为false即可，默认值就是false
  exports: [RouterModule]
})
export class AppRoutingModule { }

注意：如果是生产环境部署使用HTML5路由模式，需要额外配置服务器的重定向规则，将所有页面请求都重定向到index.html，避免刷新页面出现404问题。以Nginx为例，配置参考如下：

location / {
  try_files $uri $uri/ /index.html;
}

额外排查项 #

如果调整后仍无法匹配路由，可以检查路由配置中是否存在通配符路由（path: '**'），如果有需要将该规则放在所有路由配置的最后，避免优先级过高覆盖自定义路由。

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