Route RedirectTo function in Angular 18!!!

Angular 18 introduces a new feature called function based route redirects.Before angular 18, we could use only string here.But after angular 18, we can use a route redirect function here , which receives activatedroutesnapshot as a parameter, allowing us to dynamically determine the redirect location based on route parameters,query parameters.The benefit of this approach are we can create more flexible and complex redirect logic.The main advantage is to have redirect logic inside the route.

Before Angular 18

                    export const routes:Routes=[
                    {
                        path:'userprofile',
                        redirectTo:'user', //PREVIOUSLY WE CAN ONLY USE STRING HERE
                        pathMatch:'full'
                    }
                    ]

After Angular 18

                    export const routes:Routes=[
                    {
                        path:'userprofile', // means match this path
                        redirectTo:()=>{
                            return '/user';  // means redirect to this path
                        },
                        pathMatch:'full' // means match against the entire url
                    },
                    {   
                        path:'user',
                        component:usercomponent,

                    }
                    ]

If you type http://localhost/userprofile, it automatically takes you to user component. You can also use urlinfo parameter to redirectto function.

                    export const routes:Routes=[
                    {
                        path:'userprofile',
                        redirectTo:(urlInfo)=>{
                            console.log(urlInfo);
                            return '/user';
                        },
                        pathMatch:'full'
                    },
                    {   
                        path:'user',
                        component:usercomponent,
                    }
                    ]

The following parameters can be send to redirectto function. 1.queryParams 2.url 3.data Let us see by passing queryparams to redirectTo function,

                       export const routes:Routes=[
                        {
                            path:search,
                            redirectTo:({queryParams})=>{
                                        const type:any=queryParams['type'];
                                        switch(type){
                                            case 'users':
                                                return 'users';
                                            case 'vendors':
                                                return 'vendors';
                                        }
                                        }
                            
                        }
                        ]