Angular 2+ router navigation issue

Question

I'm developing an Angular 7 application.

Here is the routes.module.ts file

const routes: Routes = [{
  path: '',
  component: EnforcementComponent,

  children: [{
    path: 'orders',
    children: [{
        path: '',
        component: OrdersComponent
      },
      {
        path: ':id',
        component: OrdersEditComponent,
      }
    ]
  }]
}];

When I am on the orders page and click on 'edit order' button, it navigates to the OrdersEditComponent with the orderId selected.

order-edit.component.ts

goToOrderDetails(order: Order) {
  this.router.navigate([`home/enforcement/orders/${order.id}`]);
}

It works fine.

But when I am directly navigating to the url, i.e. when I type on the browser bar - home/enforcement/orders/101, it takes me back to home/enforcement/orders page. How can I fix this?

Please advise

Answer 1

This would clearly depend on your route config and where exactly you're navigating the user to a specific route.

For instance, if you were in the orders component and wanted to navigate the user to the orders/:id route, you'd do something like this:

constructor(private router: Router, private route: ActivatedRoute) {}

goToOrderDetails(order) {
  this.router.navigate([`home/enforcement/orders/${order.id}`]);
}

goToOrderDetailsRelative(order) {
  this.router.navigate([order.id], { relativeTo: this.route });
}

If you were to navigate in the template, you'd do something like this:

<p>Orders Component!</p>
<button 
  (click)="goToOrderDetails({ id: 1 })">
  Go To Order #1 Via Absolute
</button> | 
<button 
  (click)="goToOrderDetailsRelative({ id: 1 })">
  Go To Order #1 Via Relative
</button> | 
<a routerLink="./1">
  Go To Order #1 Via Relative Router Link
</a>

Notice how we're establishing that relativity here. Since the user would already be on the orders route.

Since you're supposed to do it in the order-edit component, you'd navigate the user like this in the TypeScript Class:

constructor(private router: Router, private route: ActivatedRoute) {}

goToOrderDetails(order) {
  this.router.navigate([`home/enforcement/orders/${order.id}`]);
}

goToOrderDetailsRelative(order) {
  this.router.navigate([order.id], { relativeTo: this.route.parent });
}

Or if you'd like to do it in the template, you can try this out:

<p>Orders Edit Component!</p>

<button 
  (click)="goToOrderDetails({ id: 2 })">
  Go To Order #2 Via Absolute
</button> | 
<button 
  (click)="goToOrderDetailsRelative({ id: 2 })">
  Go To Order #2 Via Relative
</button> | 
<a routerLink="../2">
  Go To Order #2 Via Relative Router Link
</a>

Do carefully notice the difference between this syntax and the one we've used for routing in the orders component. There are subtle differences in the way relativity is established in both these components.

Hopefully this helps you better understand the whole issue.

---

Here's a Working Sample StackBlitz for your ref.