DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

5

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:

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (1)

Collapse
 
jangelodev profile image
JoĆ£o Angelo ā€¢

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

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs