DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

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 },
];
Enter fullscreen mode Exit fullscreen mode

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:

Top comments (1)

Collapse
 
jangelodev profile image
JoĆ£o Angelo

Hi Nhan Nguyen,
Top, very nice !
Thanks for sharing