Angular router and browser back button

The browser stores a stack of URLs. Only when the URL changes and gets stored in the browser's navigation history can you navigate back to the previous route. Angular programmatically changes routes without actually storing the URL in the history. You can verify this in the browser's history.

Now in this case you have two options as per my knowledge.

1. Store the routing state

In Component B

import { Router } from '@angular/router';

constructor(private router: Router) {}

ngOnInit() {
  // Your logic to navigate to component C based on certain conditions
  if (shouldNavigateToC) {
    // Store flag in Router's navigation extras to indicate navigation from B to C
    this.router.navigate(['/route-C'], { state: { fromBToC: true } });
  }
}

In Component A

import { Router, NavigationStart } from '@angular/router';

constructor(private router: Router) {}

ngOnInit() {
  // Subscribe to Router events to detect navigation start
  this.router.events.subscribe(event => {
    if (event instanceof NavigationStart) {
      // Check if navigation back is coming from component C
      const navigationExtras = this.router.getCurrentNavigation()?.extras.state;
      if (navigationExtras && navigationExtras.fromBToC) {
        // Redirect to component B instead of default behavior (component A)
        this.router.navigate(['/route-B']);
      }
    }
  });
}

With this implementation, when navigating back from component C, Angular will redirect you to component B instead of the default behavior, which is navigating to component A. This allows you to maintain the expected navigation flow based on your application logic.

2. Navigation Histroy Solution

I highly prefer this solution as it can extend to a global level. Create a Navigation History service which subscribes to route changes and stores the previous route as historyUrl (You can also store it in the array). here Location Service from angular router has access to the broswer and histroy.

Below is basic class, You can extend it to more advanced.

import { Injectable } from '@angular/core';
import { Location, NavigationEnd, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class BackButtonService {
  private historyUrl: string | null = null;

  constructor(private location: Location, private router: Router) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.historyUrl = event.urlAfterRedirects;
      }
    });
  }

  goBack() {
    if (this.historyUrl) {
      this.location.back();
    } else {
      // Handle the case where there's no history (e.g., initial route)
      // You can stay on the current page or redirect to a specific route.
    }
  }
}