Error: Cannot match any routes. URL Segment: '' in angular 7

Question

I want to use routerLink in angular 7 app.

app.routingts.ts

const routes: Routes = [  
{
  path: '',
  component: AdminComponent,
  children: [     
    { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
    { path: 'drivers', loadChildren: './drivers/drivers.module#DriversModule' }
  ]
 }
];

admin html

<app-nav></app-nav>
<router-outlet></router-outlet>

dashboard html

<app-nav></app-nav>
<router-outlet></router-outlet>

HTML from nav component

<a class="nav-link" [routerLink]="['/drivers']">Drivers<span class="sr-only">

Error

core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'drivers'
Error: Cannot match any routes. URL Segment: 'drivers'

Answer 1

I want to use routerLink in angular 7 app.

app.routingts.ts

const routes: Routes = [  
{
  path: '',
  component: AdminComponent,
  children: [     
    { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
    { path: 'drivers', loadChildren: './drivers/drivers.module#DriversModule' }
  ]
 }
];

admin html

<app-nav></app-nav>
<router-outlet></router-outlet>

dashboard html

<app-nav></app-nav>
<router-outlet></router-outlet>

HTML from nav component

<a class="nav-link" [routerLink]="['/drivers']">Drivers<span class="sr-only">

Error

core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'drivers'
Error: Cannot match any routes. URL Segment: 'drivers'

Answer 2

I want to use routerLink in angular 7 app.

app.routingts.ts

const routes: Routes = [  
{
  path: '',
  component: AdminComponent,
  children: [     
    { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
    { path: 'drivers', loadChildren: './drivers/drivers.module#DriversModule' }
  ]
 }
];

admin html

<app-nav></app-nav>
<router-outlet></router-outlet>

dashboard html

<app-nav></app-nav>
<router-outlet></router-outlet>

HTML from nav component

<a class="nav-link" [routerLink]="['/drivers']">Drivers<span class="sr-only">

Error

core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'drivers'
Error: Cannot match any routes. URL Segment: 'drivers'

Answer 3

I want to use routerLink in angular 7 app.

app.routingts.ts

const routes: Routes = [  
{
  path: '',
  component: AdminComponent,
  children: [     
    { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
    { path: 'drivers', loadChildren: './drivers/drivers.module#DriversModule' }
  ]
 }
];

admin html

<app-nav></app-nav>
<router-outlet></router-outlet>

dashboard html

<app-nav></app-nav>
<router-outlet></router-outlet>

HTML from nav component

<a class="nav-link" [routerLink]="['/drivers']">Drivers<span class="sr-only">

Error

core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'drivers'
Error: Cannot match any routes. URL Segment: 'drivers'

Answer 4

When you use routerLink with the property binding syntax, like this: [routerLink], then it should be assigned a name of the property the value of which will be the route it should navigate the user to. So to fix your issue, replace this routerLink="['/drivers']" with routerLink="/drivers" in your HTML.

HTML
<a class="nav-link" routerLink="/drivers">Drivers<span class="sr-only">