Error: Cannot match any routes. URL Segment: 'rides'
Error: Cannot match any routes. URL Segment: 'rides'
我遇到了这个错误,但没有明白我错在哪里。
路线如下,
const routes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'register-user', component: RegisterUserComponent},
{path: '', redirectTo: '/login', pathMatch: 'full'},
{path: 'dash', component: SideNavComponent,
children: [
{path: 'rides', component: RidesComponent, pathMatch: 'full'}
]}];
app.component.html 是,
<router-outlet></router-outlet>
SideNavComponent HTML 是,
<mat-sidenav-container class="sidenav-container">
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar>
<div class="logo-container">
<img src="/assets/images/Yaana-logo-white.png" class="logoDiv"/>
</div>
</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</a>
<nav class="sidenavbutton">
<button class="cmpbtn" mat-button (click)="onUserInfoClicked()">User Info<mat-icon id="icon">{{userInfoIcon}}</mat-icon></button>
<ul class="subbtn" *ngIf="showUserSubs === true">
<li class="sub-menu"> <a routerLink="/rides" routerLinkActive="active">Rides </a></li>
</ul>
</nav>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="accent">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span></span>
</mat-toolbar>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
SideNavComponent 包含 以在工具栏下方显示 SideNavComponent 的子组件。
但是当我尝试导航到 RidesComponent 时
,我收到以下错误,
Error: Cannot match any routes. URL Segment: 'rides'
at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1359)
at CatchSubscriber.selector (router.js:1340)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1359)
at CatchSubscriber.selector (router.js:1340)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3662)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)
不对的地方请指正
Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<app-root></app-root>
</body>
</html>
你好像忘了加<base href="/">
。请在index.html中加这个。
{path: 'rides', component: RidesComponent}
就可以了,这里不需要pathMatch: 'full'
,我觉得休息就好了。
经过一些尝试,我找到了解决办法,是routerlink部分的问题,
这是我所做的改变,
<li class="sub-menu"> <a routerLink="rides" routerLinkActive="active">Rides </a></li>
现在可以正常工作了。
原因
<a routerLink="rides" routerLinkActive="active">Rides </a></li>
工作并且
<a routerLink="/rides" routerLinkActive="active">Rides </a></li>
这不是那个,
第一个是相对路径,第二个是绝对路径。
因此,当您单击第一个 link 时,angular 将 routerLink 附加到当前路径,而在第二个中,angular 将其附加到应用程序上下文根,不考虑当前 url。
我希望有人能从中受益。 :).
<li class="sub-menu"> <a routerLink="/dash/rides" routerLinkActive="active">Rides </a></li>
我遇到了这个错误,但没有明白我错在哪里。
路线如下,
const routes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'register-user', component: RegisterUserComponent},
{path: '', redirectTo: '/login', pathMatch: 'full'},
{path: 'dash', component: SideNavComponent,
children: [
{path: 'rides', component: RidesComponent, pathMatch: 'full'}
]}];
app.component.html 是,
<router-outlet></router-outlet>
SideNavComponent HTML 是,
<mat-sidenav-container class="sidenav-container">
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar>
<div class="logo-container">
<img src="/assets/images/Yaana-logo-white.png" class="logoDiv"/>
</div>
</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</a>
<nav class="sidenavbutton">
<button class="cmpbtn" mat-button (click)="onUserInfoClicked()">User Info<mat-icon id="icon">{{userInfoIcon}}</mat-icon></button>
<ul class="subbtn" *ngIf="showUserSubs === true">
<li class="sub-menu"> <a routerLink="/rides" routerLinkActive="active">Rides </a></li>
</ul>
</nav>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="accent">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span></span>
</mat-toolbar>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
SideNavComponent 包含 以在工具栏下方显示 SideNavComponent 的子组件。
但是当我尝试导航到 RidesComponent 时
,我收到以下错误,
Error: Cannot match any routes. URL Segment: 'rides'
at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1359)
at CatchSubscriber.selector (router.js:1340)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1359)
at CatchSubscriber.selector (router.js:1340)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3662)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)
不对的地方请指正
Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<app-root></app-root>
</body>
</html>
你好像忘了加<base href="/">
。请在index.html中加这个。
{path: 'rides', component: RidesComponent}
就可以了,这里不需要pathMatch: 'full'
,我觉得休息就好了。
经过一些尝试,我找到了解决办法,是routerlink部分的问题,
这是我所做的改变,
<li class="sub-menu"> <a routerLink="rides" routerLinkActive="active">Rides </a></li>
现在可以正常工作了。
原因
<a routerLink="rides" routerLinkActive="active">Rides </a></li>
工作并且
<a routerLink="/rides" routerLinkActive="active">Rides </a></li>
这不是那个,
第一个是相对路径,第二个是绝对路径。
因此,当您单击第一个 link 时,angular 将 routerLink 附加到当前路径,而在第二个中,angular 将其附加到应用程序上下文根,不考虑当前 url。
我希望有人能从中受益。 :).
<li class="sub-menu"> <a routerLink="/dash/rides" routerLinkActive="active">Rides </a></li>