Angular中将子路径重定向至主路径的路由配置不生效如何解决？

配置不生效的核心原因 #

• Angular 路由按从上到下的顺序匹配，你当前将routeA的子路径全部平级放在根父路由的children数组中，路由层级逻辑不匹配，通配符规则的重定向路径容易出现相对路径拼接错误
• 未将routeA的子路由收敛到routeA自身的children配置项中，路由匹配时无法正确识别routeA下的子路径层级

正确配置方式 #

将subA、subB以及通配符路由统一放到routeA的children数组中，通配符放在子路由末尾即可：

const routes: Routes = [{ 
  // ...其他根路由配置
  path: '', 
  component: MainComponent, 
  children: [
    { 
      path: 'routeA', 
      component: ComponentA,
      children: [
        { path: 'subA', component: ComponentAA },
        { path: 'subB', component: ComponentAB },
        // 匹配所有未定义的子路径，空字符串代表重定向到当前父路由即/routeA
        { path: '**', redirectTo: '' }
      ]
    }
  ]
// ...其他根路由配置
}]

可选优化 #

如果担心相对路径匹配歧义，可以将重定向路径改为绝对路径，适配所有 Angular 版本和路由配置：

{ path: '**', redirectTo: '/routeA' }

内容的提问来源于stack exchange，提问作者ishaq Haj Hasan