角度4：后備路由（pathMatch）無法正確重定向到后備網址，錯誤：未捕獲（承諾）：錯誤：無法匹配任何路由

Question

我有以下路由器對象

const appRoutes: Routes = [
  { path: '', redirectTo: '/', pathMatch:'full'},
  { path: '', component: MainComponent },
  { path: 'signin', component:SigninComponent},
  { path: 'signup', component: SignupComponent},
  { path: 'dashboard', component: DashboardComponent,
    children: [
      { path: '', redirectTo:'/dashboard/overview', pathMatch: 'full'},
      { path: 'overview', component: OverviewCampaignsComponent },
      { path: 'active', component: ActiveCampaignsComponent},
      { path: 'history', component: HistoryCampaignsComponent}
    ] }

]

除了包含redirectTo的路由之外，其他所有東西都工作正常。 如果輸入例如/ dashboard / dsadadasdasd3213，則會在控制台上收到錯誤消息

core.es5.js：1084錯誤錯誤：未捕獲（承諾中）：錯誤：無法匹配任何路由。 URL段：'dashboard / dsadadasdasd3213'錯誤：無法匹配任何路由。 網址段：“ dashboard / dsadadasdasd3213”

如果輸入/ asdasdqweqwe，則會收到類似的錯誤。 這里似乎有什么問題？ 非常感謝你！

Answer 1

創建一個404錯誤處理組件Error404Component然后嘗試添加帶有通配符的路徑以匹配未指定的每個路徑，並路由至該路徑，如下所示：

   const appRoutes: Routes = [
      { path: '', redirectTo: '/', pathMatch:'full'},
      { path: '', component: MainComponent },
      { path: 'signin', component:SigninComponent},
      { path: 'signup', component: SignupComponent},
      { path: 'dashboard', component: DashboardComponent,
        children: [
          { path: '', redirectTo:'/dashboard/overview', pathMatch: 'full'},
          { path: 'overview', component: OverviewCampaignsComponent },
          { path: 'active', component: ActiveCampaignsComponent},
          { path: 'history', component: HistoryCampaignsComponent}
          { path: '**', component: Error404Component}
        ] }

    ]

Answer 2

添加后備路線

{path：'**'，redirectTo：'session / 404'}

請找到下面的代碼以獲得更多了解...

export const AppRoutes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
  // users routes
  {
    path: '',
    component: AdminLayoutComponent,
    children: [
      { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
      { path: 'containers', loadChildren: './containers/containers.module#ContainersModule' },
      { path: 'groupcontainers', loadChildren: './group-containers/group-containers.module#GroupContainersModule' },
      { path: 'mypublickeys', loadChildren: './public-keys/public-keys.module#PublicKeysModule' },
      { path: 'myservers', loadChildren: './my-servers/my-servers.module#MyServersModule' },
      { path: 'group', loadChildren: './group/group.module#GroupModule' },
      { path: 'admin', loadChildren: './admin/admin.module#AdminModule'}
    ],
    canActivate: [AuthGuardService]
  },
  //  non authentication routes
  {
    path: '',
    component: AuthLayoutComponent,
    children: [
      { path: '', loadChildren: './session/session.module#SessionModule'}
    ]
  },
  { path: '**', redirectTo: 'session/404' }
];