Angular Routing and Navigating

Question

My app.component.html is very light

<div class="landing-page">
   <div class="main">
      <router-outlet></router-outlet>
      <div class="footer"> 
         <div class="logo-wrapper">
            <a routerLink="/"><img src="assets/images/logo.png" srcset="assets/images/[email protected] 2x,assets/images/[email protected] 3x" /></a>
         </div>
      </div>
   </div>
</div>

I have a the following routes defined in AppRoutingModule:

const routes: Routes = [    
  { path: 'book/:id', component: BookComponent },
  { path: '**', component: LandingPageComponent }
];

in my LandingPageComponent I'm navigating to the book like this:

constructor(private router: Router) { 
}

OpenBookComponent(id){        
    this.router.navigate(["/book", id], {skipLocationChange: true});
}

Up to this point everything works perfect.

The problem start when returning to the main page by navigating to ["/"]

Both clicking back < in the browser or programmatically trying to navigate from BookComponent to the base link, reveal the full path in the address bar (i.e.: http://localhost:4200/book/123) and results in displaying only the footer

my code navigating back in BookComponent is:

constructor(private route: ActivatedRoute, private router: Router) { 
    
}
ngOnInit() {        
    this.id = this.route.snapshot.paramMap.get('id');       
}
closeBook(){      
   this.router.navigate(["/"], {skipLocationChange: true});
}

How can I clear all parameters from the address when going back, so it remains just / or http://localhost:4200 ?

Answer 1

You don't have to delete the parameters. You must just add a new route like this:

const routes: Routes = [
  { path: 'book/:id', component: BookComponent },
  { path: '', component: LandingPageComponent },
  { path: '**', component: LandingPageComponent }
];

Now if you want to navigate to "['/']", you can write it like this, as an example:

<a [routerLink]="['/']" class="nav-link active">Back</a>

And now it would display the component, where you have written behind '' in the angular routes array, in this case the LandingPageComponent.