Angular v18 route's redirectTo property can be a function

In 🅰️ Angular v18, a route's redirectTo property can be a function that returns a string or UrlTree.

We can create more dynamic redirects based on the application's state:

const routes: Routes = [
  { path: "first-component", component: FirstComponent },
  {
    path: "old-user-page",
    redirectTo: ({ queryParams }) => {
      const errorHandler = inject(ErrorHandler);
      const userIdParam = queryParams['userId'];
      if (userIdParam !== undefined) {
        return `/user/${userIdParam}`;
      } else {
        errorHandler.handleError(new Error('Attempted navigation to user page without user ID.'));
        return `/not-found`;
      }
    },
  },
  { path: "user/:userId", component: OtherComponent },
];

Check it out 👉 https://angular.dev/guide/routing/common-router-tasks#setting-up-redirects

I hope you found it helpful. Thanks for reading. 🙏

Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyendevjs/
Dev: https://dev.to/nhannguyendevjs/
Hashnode: https://nhannguyen.hashnode.dev/
Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
X (formerly Twitter): https://twitter.com/nhannguyendevjs/
Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs

Blog

Angular v18 route's redirectTo property can be a function

Nhan Nguyen

Join Our Newsletter. No Spam, Only the good stuff.

Related