Angular 17浏览器访问指定路由自动跳转到默认路由问题求助

问题根源 #

你的问题出在Question模块的路由顺序配置错误：

• 动态路由{ path: ':id', ... }被放在了{ path: 'edit/:id', ... }前面
• 直接访问/question/edit/1时，Angular路由匹配会优先命中:id路由，把edit当作id参数解析
• 此时resolve函数里parseInt('edit',10)得到NaN，调用service.findById(NaN)大概率请求失败，导致导航终止，最终触发全局通配符路由**重定向到/user/login

而通过路由链接访问时，Angular会正确识别路由层级，不会出现匹配顺序问题，所以能正常工作。

解决方案 #

1. 调整Question模块的路由顺序 #

把带静态前缀的edit/:id路由移到动态:id路由前面，确保静态路由优先匹配：

修改question-routing.module.ts：

const routes: Routes = [
  { path: 'list', component: QuestionListComponent },
  // 先匹配带静态前缀的路由
  { path: 'edit/:id', component: QuestionEditComponent, resolve: { Question: questionLoadResolveFn } },
  // 再匹配动态参数路由
  { path: ':id', component: QuestionDetailComponent, resolve: { Question: questionLoadResolveFn } },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class QuestionRoutingModule { }

2. 完善Resolve函数的错误处理 #

避免因id解析失败或请求错误导致的导航异常，在resolve函数中添加校验和错误处理：

修改question-load-resolver.service.ts：

import { inject } from '@angular/core';
import { ResolveFn, Router } from '@angular/router';
import { QuestionService } from './your-question-service-path'; // 替换为实际路径
import { EMPTY, catchError } from 'rxjs';

export const questionLoadResolveFn: ResolveFn<Question> = (
  route: ActivatedRouteSnapshot
): Question | Observable<Question> | Promise<Question> => {
  const service = inject(QuestionService);
  const router = inject(Router);

  const idStr = route.paramMap.get("id");
  const id = parseInt(idStr, 10);
  
  // 校验id是否有效
  if (isNaN(id)) {
    console.error('Invalid question ID:', idStr);
    router.navigate(['/question/list']);
    return EMPTY;
  }

  console.log('QuestionLoadResolver: ' + id);
  return service.findById(id).pipe(
    // 处理请求失败的情况
    catchError(() => {
      console.error('Failed to load question with ID:', id);
      router.navigate(['/question/list']);
      return EMPTY;
    })
  );
};

3. 验证修复效果 #

重启Angular应用后，直接在地址栏访问http://localhost:4200/question/edit/1，查看RouterLoggingService的日志，应该会正确显示/question/edit/1的导航记录，不再重定向到登录页。

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