Angular中RouterLink点击后未跳转到对应Component的路由问题求助

存在的问题 #

• 根路由重定向规则造成死循环
  根路由第一个配置path: ''重定向到'/'，相当于匹配到空路径后又跳回根路径触发新一轮匹配，永远无法进入后续的LayoutComponent和子模块路由逻辑。
• 缺失/home路由定义+重定向滥用绝对路径
  MainModule路由里配置了空路径重定向到'/home'，但所有路由配置中都没有定义path: 'home'的对应规则，后续通配符**又会把所有未匹配路径重定向回'/home'，形成第二次死循环，路由永远不会走到search的匹配逻辑。
• 单路由同时配置component和loadChildren冲突
  search路由同时声明了component: SearchFormComponent和loadChildren加载子模块，Angular路由默认只会渲染声明的component，不会加载子模块，若SearchModule里有子路由配置会完全失效。
• 缺失路由出口（潜在问题）
  若LayoutComponent模板中没有<router-outlet></router-outlet>标签，就算路由匹配成功，子路由组件也没有渲染位置。

修复方案 #

第一步：修改根路由（app.routing） #

删除无效的死循环重定向规则，修改后配置如下：

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    loadChildren: () => import('./views/main/main.module').then( m => m.MainModule )
  }
];

第二步：修改MainModule路由 #

1. 补充home路由定义，重定向改用相对路径
2. 移除search路由冲突的配置：如果SearchModule里包含search子路由，就删除component声明；如果不需要子模块，就删除loadChildren声明
3. 调整通配符规则避免死循环
   修改后示例（假设保留SearchModule子模块）：

const routes: Routes = [
  // 补充home路由配置，替换为实际的Home组件
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'search',
    loadChildren: () => import('../../views/search/search.module').then( m => m.SearchModule )
  },
  {
    path: '**',
    redirectTo: 'home',
    pathMatch: 'full'
  }
];

第三步：校验SearchModule路由（保留子模块时需要） #

如果保留了search的loadChildren配置，需要确保SearchModule里的路由配置父路径为空：

// search.module对应的路由配置
const routes: Routes = [
  {
    path: '',
    component: SearchFormComponent
    // 可补充其他search下的子路由
  }
];

第四步：确认路由出口 #

确保LayoutComponent的模板中存在<router-outlet></router-outlet>标签，子路由组件会渲染到该标签位置。

完成以上修改后，点击routerLink跳转/search即可正常匹配路由。

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