Angular router, running over an existing url

Question

Heyo, got a SPA with 5 pages, each page beside login page got nav, which from there I'm navigating through the app via routerLink.

I'm looking for that with each route the existing URL(without the main segment) will run over the existing segment and route me to the requested URL.

const routes: Routes = [


{path:'', component:LoginComponent},
  {path:'main_page', component:MainpageComponent},
  {path:'add_computer', component:AddcomputerComponent},
  {path:'edit_computer', component:EditcomputerComponent},
  {path:'remove_computer', component:RemovecomputerComponent},
];

for example: the user located at = http://localhost:4200/main_page and I want him to redirect to = http://localhost:4200/add_computer.

But what actually happens is that = http://localhost:4200/main_page/add_computer.

I've found a few roundabout solutions, but I've heard there's a proper solution for that.

Example of my navbar:

<a routerLink="main_page">Main Page</a><br><br>
<a routerLink="add_computer">Add Computer</a><br><br>
<a routerLink="edit_computer">Edit Computer</a><br><br>
<a routerLink="remove_computer">Remove Computer</a><br><br>

C. Eggart C. Eggart · Accepted Answer · 2021-08-23T13:59:03

In your component file you can check your router paths like this:

constructor(private router: Router) {}

ngOnInit(): void {
    console.log(this.router.config);
}

Assumed you have only the one routing-module configured above. This should log an array with 5 elements, your configured paths.

If this is correct you can route from ts file like:

this.router.navigate(['/add_computer']);

or from html file like:

<a [routerLink]="['/add_computer']">Add Computer Component</a>

Angular router, running over an existing url

1 Answers