角路由到首页不起作用？

Question

Here is my error:

core.es5.js:1020 ERROR Error: Uncaught (in promise): 
Error: Cannot match any routes. URL Segment: 'home'

This is the code from the view.html:

<div class="container">
  This is the main app;
  <a routerLink="second">Click to go to second</a>
  <a routerLink="third">Click to go to third</a>
  <a routerLink="app">Go to Home</a>
  <router-outlet></router-outlet>
</div>

And this is my array of objects which includes the path to the home and other paths. The path to the home is correct, hence I don't see why the error pops up every time I click on it.

const appRoutes: Routes=[
  {path:'second', component:SecondComponent},
  {path:'third', component:ThirdComponent},
  {path:'', redirectTo:'./app', pathMatch:'full'},
]

When I click on the third and second component url, everything works fine.

NOTE: I want to hide the second and third component when I click on the home component.

Answer 1

You need to define the home route:

const appRoutes: Routes=[
  {path:'home', component:HomeComponent},
  {path:'second', component:SecondComponent},
  {path:'third', component:ThirdComponent},
  {path:'', redirectTo:'/home', pathMatch:'full'},
  {path:'**', redirectTo:'/home', pathMatch:'full'}
];

Answer 2

This solves my problem, my home path is empty and therefor the home page does not duplicate itself once I click on the home tag.

const APP_ROUTES: Routes=[
  {path:'first', component:FirstComponent},
  {path:'second', component:SecondComponent},
  {path:'third', component:ThirdComponent},
  {path:'', redirectTo:'', pathMatch:'full'},
];