I have the following router object
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}
] }
]
Everything is working fine except for the routes that contain a redirectTo. If I enter for example /dashboard/dsadadasdasd3213 I get an error on the console
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'
If I enter /asdasdqweqwe I get a similar error. What seems to be wrong here? Thank you very much!
Create a 404 error handling component Error404Component
and try adding a path with a wildcard to match every path that is not specified and route to it just like this:
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}
] }
]
Add fallback route
{ path: '**', redirectTo: 'session/404' }
Please find below code for more understanding ...
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' }
];
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.