javascript - Angular 4 : Fallback routes(pathMatch) doesn't redirect correctly to the fallback url, 错误:未捕获( promise 中):错误:无法匹配任何路由

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}
    ] }

]

除了包含重定向的路由之外，一切正常。例如，如果我输入/dashboard/dsadadasdasd3213，我会在控制台上收到错误

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/dsadadasdasd3213' Error: Cannot match any routes. URL Segment: '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}
        ] }

    ]