Angular route not routing to the component

Question

I am struggling to get my route to work. I am using RouterLink which does not navigate to the route. My app.routing has

const routes: Routes = [
{
  path: '',
  redirectTo: '/',
  pathMatch: 'full'
  },
  {
   path: '',
    component: LayoutComponent,
    loadChildren: () => import('./views/main/main.module').then( m => m.MainModule )
  }
];

The mainModule has the following

const routes: Routes = [
 {
  path: '',
  redirectTo: '/home',
  pathMatch: 'full'
},
{
 path: 'search',
 component: SearchFormComponent,
 loadChildren: () => import('../../views/search/search.module').then( m => m.SearchModule )
},
{
 path: '**',
 redirectTo: '/home',
 pathMatch: 'full'
}
];

The mainModule declares and exports LayoutComponent

In LayoutComponent.html

    <a class="nav-link" [routerLink]="'/search'">
      Search
    </a>

But when I click on the search in the UI, the route is not going to the search component. It stays on the Home component. Please help - where am I going wrong?

Does this answer your question? Angular 8 router not redirecting to routes — Malcor
– Malcor, Commented Oct 14, 2021 at 15:59
No. Ordering routes is not a problem. I just have two routes. Why is the 'search' route not found — user2837961
– user2837961, Commented Oct 14, 2021 at 16:02
Your first route is path: '' and your second route is path: 'search', Angular router is finding your first path and not going to search. — Malcor
– Malcor, Commented Oct 14, 2021 at 16:03
@Malcor How can it find '' route when my routerLink has '/serach'? Anyway I tried putting '' route to the end and I still have the same problem — user2837961
– user2837961, Commented Oct 14, 2021 at 16:08

Malcor · Accepted Answer · 2021-10-14 16:15:04Z

1

Swap the order of your routes.

const routes: Routes = [
{
 path: 'search',
 component: SearchFormComponent,
 loadChildren: () => import('../../views/search/search.module').then( m => m.SearchModule )
},
 {
  path: '',
  redirectTo: '/home',
  pathMatch: 'full'
},
{
 path: '**',
 redirectTo: '/home',
 pathMatch: 'full'
}
];

Angular router works with first come, first served.

The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. In the configuration above, routes with a static path are listed first, followed by an empty path route, that matches the default route. The wildcard route comes last because it matches every URL and should be selected only if no other routes are matched first.

From angular website here

As explained here

Update: Although it would still be an issue, so I'll leave the original answer here. Try setting your router link to

   <a class="nav-link" [routerLink]="['search']">
      Search
    </a>

edited Oct 14, 2021 at 16:15

answered Oct 14, 2021 at 16:08

Malcor

2,73124 silver badges29 bronze badges

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

5 Comments

user2837961 Over a year ago

Unfortunately does not work since my routerLink has '/search'

Malcor Over a year ago

Any error messages in the console when clicking the link?

user2837961 Over a year ago

No error message in the console

Malcor Over a year ago

I've updated my answer

user2837961 Over a year ago

Thanks - unfortunately no luck

user2837961 · Accepted Answer · 2021-10-14 16:29:36Z

0

Finally solved it by removing '' and ** and replacing them with

{
 path: '',
 component: HomeComponent,
},

answered Oct 14, 2021 at 16:29

user2837961

1,5553 gold badges33 silver badges73 bronze badges

Collectives™ on Stack Overflow

Angular route not routing to the component

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related