角度路由：如何将所有未知的嵌套路由重定向到一个组件？

Question

目前我有以下路由器：

const routes: Routes = [
  { path: '', redirectTo: 'presentation', pathMatch: 'full' },
  { path: 'presentation', component: PresentationPageComponent },
  { path: 'news', component: NewsPageComponent }, {
    path: 'tools', component: ToolsPageComponent,
    children: [
      { path: 'unit-selector', component: UnitSelectorComponent },
      { path: 'object-selector', component: ObjectSelectorComponent },
    ] },
  { path: 'games', component: GamesPageComponent },
  { path: '**', component: Error404PageComponent }
];

我的问题有两个：

路由器正确地将所有错误路由（例如 mydomain.com/badRoute 和 myDomain.com/incorrectRoute Web 导航器（尝试了 Firefox 和 Edge）在控制台中显示白屏和错误（由于 MIME 类型不正确，资源被阻止）

mydomain.com/tools 路由正常工作，并在 ToolsPageComponent 中显示 Error404PageComponent

我怎样才能让我的路线正常工作？

注意：我使用 WebStorm IDE 在本地运行网站（它没有服务器/后端）

这是错误的图片（这只发生在嵌套路由上）：

Answer 1

您的app-routing.module.ts 中似乎有两个{ path: '**', component: Error404PageComponent }。从子路由中删除{ path: '**', component: Error404PageComponent }，只保留Routes 中的最后一个。会好的。

我在Stackblitz 上为您准备了充足的食物。我的示例中的第三个选项卡 undefined route 是多个未定义的路由，例如 "/home/page1/undefined/nested/route"，如果您单击该选项卡，您将被正确重定向到 home 组件。