Angular 2+ Routing redirect

Question

This may seems as a silly question but I can't understand this routing

routes.ts:

const APP_ROUTES: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'articles', component: ArticulosComponent },
  { path: 'article/:id', component: ArticuloComponent },
  { path: '', pathMatch: 'full', redirectTo: 'home' },
  { path: '**', pathMatch: 'full', redirectTo: 'notfound' }
];

When access to localhost:4200/article/6 the router redirects to localhost:4200/#/home but when manually wrote localhost:4200/#/article/6 works fine.

First, note # symbol, why is it there and what different does it cause? And... I specify 'manually' because even through code adding the # symbol to the path (ex. <a href="#/article/6"></a>) keeps redirecting to home

The main question/problem is "Which would be the correct link or rule in other to load the correct component?"

Abdul Jabbar · Accepted Answer · 2018-09-26 11:52:32Z

1

You can remove # from route changing value of useHash in app.module.ts

RouterModule.forRoot(ROUTES, { useHash: false }),

You can add pathMatch: 'full' with home and articles routes

answered Sep 26, 2018 at 11:52

Abdul Jabbar

3682 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2+ Routing redirect

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related