Route redirecting to main url

Question

I am trying to understand the way angular 2 routing works. I have defined two child route paths 'movieCategory/create' and path: 'movieCategory', When i type http://localhost:4200/#/movieCategory it works fine and showing MovieCategory component. But when i type http://localhost:4200/#/movieCategory/create to browser , it shows CreateMovieCategory component but the url becomes http://localhost:4200/#/movieCategory again. What am i doing wrong ? And the second question where does the # come from ?

My routes

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'movieCategory',
    pathMatch: 'full',
  },
  {
    path: '',
    component: FullLayoutComponent,
    data: {
      title: 'Film Kategorileri'
    },
    children: [
      {
        path: 'movieCategory/create',
        component: CreateMovieCategory
      },
      {
        path: 'movieCategory',
        component: MovieCategory
      }

    ]
  }
];

I also have a button which displays the same behaviour when i click it.

<button class="btn btn-primary pull-right" type="button" [routerLink]="['/movieCategory/create']">

Thanks in advance

Rahul Singh Rahul Singh · Accepted Answer · 2017-08-04T09:37:25

export const routeConfig:Routes = [
    {
        path: '',
        component: FullLayoutComponent
    }

    {        
        path: 'movieCategory',
        children: [
            {
             path: 'create',
             component: CreateMovieCategory               
            }
        ]    
    }
];

For more info check this LINK.

If you use PathLocationStrategy as describe here you can remove the hash in the URL.

Route redirecting to main url

1 Answers