子路由错误

Question

我在我的app.module.ts中创建了以下内容：

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: SignUpComponent },
  { path: 'about', component: AboutUsComponent },
  { path: 'products', component: ProductsComponent},
  { path: 'fresh-food', component: FreshFoodComponent, 
    children: [
      {path: 'milks-creams', component: MilkCreamComponent},
      {path: 'cheeses', component: CheeseComponent}
    ] },
  { path: '', redirectTo: '/home', pathMatch: 'full' },    // whenever path is empty --> redirect
  { path: '**', redirectTo: '/home', pathMatch: 'full' }   // if path is anything not defined --> redirect

]

并在my @NgModule中添加了以下导入

imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    FormsModule,
    HttpClientModule
  ],

添加子路由后，在浏览器中收到以下错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home'
Error: Cannot match any routes. URL Segment: 'home'
    at ApplyRedirects.noMatchError (router.js:1719)
    at CatchSubscriber.eval [as selector] (router.js:1705)
    at CatchSubscriber.error (catchError.js:105)

..。

Answer 1

问题在于：

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },    // whenever path is empty --> redirect
  { path: '**', redirectTo: '/home', pathMatch: 'full' }   // if path is anything not defined --> redirect
]

您试图将用户重定向到路由中未声明的“home”路径。

你不想写信吗？

  { path: 'home', component: HomeComponent },

或者你想这样做？

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full' }   // if path is anything not defined --> redirect
]

Answer 2

在您的退出信息'home'未定义。

请将此添加到您的rout信息中如下：

{ path: 'home', component: HomeComponent }

或

更改rout信息的这一部分：

{ path: '', redirectTo: '/', pathMatch: 'full' }, 
{ path: '**', redirectTo: '/', pathMatch: 'full' }

Answer 3

解决方案1: Home /home

将代码更改为

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: SignUpComponent },
  { path: 'about', component: AboutUsComponent },
  { path: 'products', component: ProductsComponent},
  { path: 'fresh-food', component: FreshFoodComponent, 
    children: [
      {path: 'milks-creams', component: MilkCreamComponent},
      {path: 'cheeses', component: CheeseComponent}
    ] },
  { path: '', redirectTo: '/home', pathMatch: 'full' },    // whenever path is empty --> redirect
  { path: '**', redirectTo: '/home', pathMatch: 'full' }   // if path is anything not defined --> redirect

]

当没有提到路径时，您将路由重定向到path '/home'，因此必须为'/home‘而不是'’提到组件HomeComponent

解决方案2: Home /

如果您想让家在“/”上，那么不要使用重定向，并将代码保持为

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: SignUpComponent },
  { path: 'about', component: AboutUsComponent },
  { path: 'products', component: ProductsComponent},
  { path: 'fresh-food', component: FreshFoodComponent, 
    children: [
      {path: 'milks-creams', component: MilkCreamComponent},
      {path: 'cheeses', component: CheeseComponent}
    ] }

]