How to redirect to a parent route from a children component in angular9?

Question

i have the next routing config

 const appRoutes: Routes = [


 {path: '', component: HomeComponent},
  {path: 'Home', component: HomeComponent},
  {path: 'Clients', component: ClientsComponent},
  {path: 'Client', component: ClientComponent,children:[
      {path:'Home',redirectTo:'Home',pathMatch:'full'},
      {path:'Files',component: FilesComponent,},
      {path:'Contacts',component:ContactsComponent}
    ],},
  {path: 'Users', component: UsersComponent},
  {path: 'User', component: UserComponent},
  {path: '**', component:HomeComponent}
]

and i have a couple of routeroutlets one in the app.component.html and the second one in another componente that looks like this

<app-client-menu></app-client-menu>
<router-outlet></router-outlet>

from the client-menu i want to redirect to home page that renders in app.component.hmtl in this way

<ul class="sidenav sidenav-fixed" id="mobile">
  <li>
    <div>
      <div class="background">
        <img src="assets/images/clientsBanner.jpg" class="responsive-img" alt="empleados">
      </div>
    </div>
  </li>
  <li><a [routerLink]="['Files']">Files</a></li>
  <li><a [routerLink]="['Contacts']">Contacts</a></li>
  <li><a >Update Client</a></li>
  <li><a >Delete Client</a></li>
  <li><a [routerLink]="[ { outlets: {home:['Home'] } }]"><i class="material-icons green-text ">home</i>Home</a></li>
</ul>

but when i do that i endup going to not found page and with this url looking like Client/Files/Home insted of /Home how could i solve this ?

Answer 1

You have Home defined as both a child route and a top route. I assume the intention was to have the home link in the child route redirect to the top route?

if so, this is unnecessary.

Remove the child Home route and change the router link to

homeHome