Angular 13子页面刷新后重定向至根路由问题排查求助

问题概述 #

• 组件层级：
  • User（根组件）
    • Child 1
      • Child 1-1
    • Child 2
• 根组件对应路径/u，访问localhost:4200/u可正常加载，页面菜单栏跳转子组件功能正常，子组件通过router-outlet渲染
• 异常表现：
  • 在Child 1-1页面刷新时，Angular先匹配/u/child1/child1-1，随即自动重定向到/u
  • 直接通过URL访问/u/child1/child1-1时，同样会被重定向到/u，影响业务使用

当前路由配置 #

user.route.ts #

const children: Routes = [
  child1Route,
  child2Route,
];

export const USER_ROUTE: Route = {
  path: 'u',
  component: UserComponent,
  data: {
    pageTitle: 'user.title'
  },
  canActivate: [AuthGuard], // 已禁用
  children: children
};

export const USER_ROUTES: Routes = [USER_ROUTE];

child1.route.ts #

const children: Routes = [
  child1-1Route
];

export const child1Route: Route = {
  path: 'child1',
  component: ChildOneComponent,
  children: children
}

child1-1.route.ts #

export const child1-1Route: Route = {
  path: 'child1-1',
  component: ChildOneOneComponent,
}

注：USER_ROUTE已导入至user.module.ts的RouterModule.forRoot(USER_ROUTE)中

排查方向 #

1. 路由模块导入方式错误：RouterModule.forRoot()仅应在根模块（AppModule）中使用，特性模块（如UserModule）需使用forChild()注册子路由，错误使用forRoot()会导致路由配置冲突，子路由无法被正确识别
2. 缺失子路由匹配后的 fallback 处理：当刷新或直接访问子路由时，若Angular无法正确解析子路由配置，会自动回退到父路由/u
3. 全局路由重定向逻辑：检查是否存在全局路由守卫、路由事件监听或AppComponent中的代码，强制将特定路径重定向到/u

解决方法 #

1. 修正路由模块导入方式（核心修复） #

在UserModule中，将RouterModule.forRoot(USER_ROUTE)修改为RouterModule.forChild(USER_ROUTES)：

// user.module.ts
@NgModule({
  imports: [
    // 替换原有的forRoot为forChild
    RouterModule.forChild(USER_ROUTES)
  ],
  // ...其他配置
})
export class UserModule { }

原因：forRoot()会创建一个新的路由根，覆盖原有路由配置，导致子路由无法被正确注册；forChild()用于在特性模块中扩展根路由，确保子路由被正确识别

2. 可选：配置父路由默认子路由（按需使用） #

若希望访问/u时默认加载Child 1-1组件，可在USER_ROUTE的children中添加重定向规则，替代组件内的URL监听逻辑：

// user.route.ts
const children: Routes = [
  child1Route,
  child2Route,
  // 添加默认重定向
  { path: '', redirectTo: 'child1/child1-1', pathMatch: 'full' }
];

3. 排查并移除全局重定向逻辑 #

检查全局路由守卫、AppComponent或其他全局服务中是否存在强制重定向到/u的代码，例如：

// 示例：需移除的错误逻辑
this.router.events.subscribe(event => {
  if (event instanceof NavigationEnd && event.url.includes('/u/child1/child1-1')) {
    this.router.navigate(['/u']);
  }
});

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