angular4.x, navigationEnd.url vs navigationEnd.urlAfterRedirects

Question

Any explain or doc about the difference between navigationEnd.url and navigationEnd.urlAfterRedirects?

Which one should I use if I want to write a breadcrumb component?

Answer 1

It depends if you care about the URL that the user requested or the URL of the route that actually gets loaded.

If you define any routes with redirects, the two values will be different if the user navigates to a route that redirects to another route.

For example, take these routes (which components the routes load is not relevant, so they're excluded here):

{
  path: "",
  pathMatch: "full",
  redirectTo: "home"
},
{
  path: "home",
},

If the user navigates to /home, then navigationEnd.url and navigationEnd.urlAfterRedirects will both be /home.

If the user navigates to /, then navigationEnd.url will be / and navigationEnd.urlAfterRedirects will be /home.

Even if you don't implement redirects, try to use the value that is most relevant to the the functionality you are basing on the url because you don't want to run into strange bugs later on if you add redirects.