CODEWITHSUNDEEP
htmlangulartypescriptroutes
Tangooe
Tangooe

Reputation: 485

Angular 2 [routerLink] navigates but doesn't update the url

My Link 

    <a [routerLink]="['/login']">
        <i class="glyphicon glyphicon-user"></i> Login
    </a>

My Routes

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: UserRegisterComponent },
  { path: 'auctions', component: AuctionListComponent },
  { path: 'auction/:id', canActivate: [ AuctionDetailGuard ], component: AuctionDetailComponent },
  { path: 'supplier/:id', component: SupplierDetailComponent }
];

the routerlinks that navigates to auctions, auction/:id and supplier/:id works as intended, but login and register does not, when i click either one of them i get navigated to the correct component, the URL however changes to localhost:xxxx/login for a split second before it goes back to localhost:xxxx/previousUrl

Here is the other routerlink, that works as intended

<a [routerLink]="['/auction', auction.id]">
    {{category.name }} - {{auction.name}}
</a>

Upvotes: 1

Views: 1817

Answers (2)

Facyo Kouch
Facyo Kouch

Reputation: 787

When you have child routes, it's better to use the children: []. This is how you use it:

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: UserRegisterComponent },
  { path: 'auctions', component: AuctionListComponent, children: [
     { path: ':id', canActivate: [ AuctionDetailGuard ], component: AuctionDetailComponent },
     { path: ':id/edit', component: AuctionDetailEditComponent }
  ]},

  { path: 'supplier/:id', component: SupplierDetailComponent }
];

// This is what you can place on the item
<a [routerLink]="[idOfItem]">Link to Item</a>

// And this method you call in your component.ts file
// Add relativeTo to make it relative to the current route
// so you'll add the "edit" after the called ID.
this.router.navigate(['edit'], { relativeTo: this.route });

Upvotes: 1

Aravind
Aravind

Reputation: 2330

Can you please try login and register in the following way:

<a routerLink="/login">
    <i class="glyphicon glyphicon-user"></i> Login
</a>

Upvotes: 0

Related Questions