错误：无法匹配任何路由。 URL 段：'' 角度 7答案

【问题标题】：Error: Cannot match any routes. URL Segment: '' in angular 7错误：无法匹配任何路由。 URL 段：'' 角度 7
【发布时间】：2019-05-11 15:14:32
【问题描述】：

我想在 Angular 7 应用程序中使用 routerLink。

app.routingts.ts

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

管理 html

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

仪表板 html

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

来自导航组件的 HTML

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

错误

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

【问题讨论】：

您可以打开路由跟踪以查看是否可以提供任何问题迹象。作为forRoot 方法的第二个参数指定：{ enableTracing: true }
您能否提供有关您的有效网址应该是什么样子的信息？应该只是drivers 吗？如果是这样，那么您的第二个路由器插座中应该显示什么？
有效的 URL 应该是：localhost:4200/admin/drivers
那么第一个路径应该是：path: 'admin', component: AdminComponent,

标签： angular routes

【解决方案1】：

当您将 routerLink 与属性绑定语法一起使用时，例如：[routerLink]，那么它应该被分配一个属性的名称，其值将是它应该导航用户到的路由。因此，要解决您的问题，请将您的 HTML 中的 routerLink="['/drivers']" 替换为 routerLink="/drivers"。

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

【讨论】：

【解决方案2】：

如果您尝试实现这样的 URL：localhost:4200/admin/drivers

那么你的路径应该是这样的：

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

你的链接应该是这样的：

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

对于绝对路线或此：

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

相对路径。（没有斜线）

【讨论】：

【解决方案3】：

试试这个

管理路由

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

HTML

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

admin.component.html

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

app.routing

{ path: 'admin' , loadChildren:'./admin/admin.module#AdminModule'},

【讨论】：

【解决方案4】：

你需要有这样的路由器配置

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

模板：

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

【讨论】：

谢谢回复，我试试
现在它显示错误：无法匹配任何路由。 URL 段：'dashboard/admin/drivers'
什么是仪表板。你能创建stackblitz吗？将有助于修复它。
因为我已将放在仪表板组件中。并尝试在页面上导航。
该解决方案对我有用。我猜这是b'cs'空'路径。一旦空路径被重定向并且第一级路径有标签，它就可以工作。