CODEWITHSUNDEEP
angulartypescript
user14321799
user14321799

Reputation:

Why slashes Are put in routerLink Angular?

Why leading slashes are put in routerLink like,

<a [routerLink]="['/home']" [routerLinkActive]="['active']">Home</a>

This <a [routerLink]="['home']" [routerLinkActive]="['active']">Home</a> code without slashes also works fine for me,and also inside 'forRoot' method there are no leading slashes in path: "home" (no leading slashes here)

 RouterModule.forRoot([
    {path:'home',component:HomeComponent},
    {path:'**',component:PageNotFoundComponent}
    ])

And in some sites i saw trailing slashes also

const routes: Routes = [    
  { path: '', redirectTo: 'home/.', pathMatch: 'full'},    
  { path: 'home/.', component: HomeComponent },          
];

(notice trailing slashes in path attribute above and also dot '.' after trailing slash) with router link

<a [routerLink]="['/home/.']" [routerLinkActive]="['active']">Home</a>

(router link also has trailing and leading slashes) I am confused,please help

Upvotes: 4

Views: 4733

Answers (1)

Mujadid Mughal
Mujadid Mughal

Reputation: 2663

1.) The leading slash means the route shall start from the root of the routes array. So for example, the structure of your routes is like this

 RouterModule.forRoot([
{path:'home',component:HomeComponent},
{path:'admin', component: AdminComponent, children:[
    {path:'home', component: AdminHomeComponent},
    {path:'users', component:AdminUsersComponent}
]}
{path:'**',component:PageNotFoundComponent}
])

Here there are two routes with path home, one on the route of the array that that has HomeComponent and one inside the admin that has AdminHomeComponent. Now suppose if you were in the admin/users path and in the AdminUsersComponent you had a route like this

<a [routerLink]="['home']">Application Home</a>

It would redirect to home path that has AdminHomeComponent because without the leading slash the paths would be relative to the current route of the router. If from the nested path, you want to go to the root home component you would use leading slash like this

<a [routerLink]="['/home']">Application Home</a>

2.) A trailing slash (backslash at the end of the url) is placed in a url for the SEO purpose. To explain this, lets say you have a route array like this

const routes: Routes = [  
  { path: '', redirectTo: 'home', pathMatch: 'full'},  
  { path: 'home', component: HomeComponent },  
  { path: 'about', component: AboutUsComponent },  
  { path: 'contactus', component: ContactUsComponent }  
];

And if you navigate to a page with http://localhost:4200/about or with http://localhost:4200/about/ you will be shown same AboutUsComponent. For us they both would mean same urls but for search engines they would mean different urls. And having two different urls rendering same content, is not a good SEO practice. Thats why developers put trailing slash in the url and devise a mechanism to add a trailing slash itself in the route if its missing by default (or give a permanent redirect 301 so that not to confuse search engines)

Here is a nice link that explains trailing slash in angular routes.

Upvotes: 4

Related Questions