添加@ngrx/router-store后默认路由失效问题求助

我之前也碰到过类似的情况，大概率是router-store的配置和Angular默认路由的初始化顺序、状态同步逻辑出了问题，咱们一步步排查解决：

1. 核对RouterStoreModule的初始化顺序 #

一定要确保RouterStoreModule.forRoot()是在RouterModule.forRoot(routes)之后导入的——NgRx的路由状态存储需要依赖Angular路由先完成初始化。比如在AppModule的imports数组里，顺序应该是这样：

imports: [
  // 先加载Angular核心路由模块
  RouterModule.forRoot(routes),
  // 再加载NgRx相关模块
  StoreModule.forRoot(reducers),
  RouterStoreModule.forRoot(),
  // 其他业务模块...
]

如果顺序搞反了，会导致路由初始化时NgRx还没准备好，直接影响默认重定向的触发逻辑。

2. 确认默认路由的配置细节 #

你的路由配置里，默认重定向的规则必须带上pathMatch: 'full'，这是确保只有当路径完全为空时才触发重定向的关键，尤其是在NgRx同步路由状态的场景下，少了它重定向很可能失效。正确的配置应该类似：

const routes: Routes = [
  { path: '', redirectTo: '/dashboards/dashboard1', pathMatch: 'full' },
  {
    path: '',
    component: FullComponent,
    children: [
      { path: 'dashboards/dashboard1', component: Dashboard1Component },
      // 其他子路由配置...
    ]
  },
  // 其他全局路由...
];

3. 排查路由状态的初始化动作 #

使用router-store时，NgRx会监听路由变化并同步到状态里，可能存在初始化时状态未同步导致重定向未触发的情况。你可以在AppComponent里加一个兜底的导航逻辑：

import { Router } from '@angular/router';

constructor(private router: Router) {}

ngOnInit() {
  // 检测当前路径为空时，手动触发导航
  if (this.router.url === '/' || this.router.url === '') {
    this.router.navigate(['/dashboards/dashboard1']);
  }
}

这是个临时的补救方案，但能帮你快速验证问题是否出在状态同步环节。

4. 检查路由守卫的影响 #

如果你的路由（包括默认路由）配置了CanActivate之类的守卫，要确认这些守卫在NgRx环境下是否正常工作——有没有因为状态未初始化而返回false，导致重定向被拦截。可以暂时移除守卫测试，逐步定位问题点。

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