Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: "Поездки"

Question

Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: "Поездки"

Я получаю эту ошибку, но не понимаю, где я не прав.

маршруты следующие,

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 как

HTTP: // локальный: 4200 / тире / аттракционы

Я получаю следующую ошибку,

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>

1

angular angular-routing angular-router angular-routerlink

Источник

user2160682 18 июн '18 в 05:59

4 ответа

Другие вопросы по тегам angular angular-routing angular-router angular-routerlink

user9390292 18 июн '18 в 08:55 2018-06-18 08:55 · Answer 1 · 2018-06-18 08:55

Причина по которой

<a routerLink="rides" routerLinkActive="active">Rides </a></li>

работал и

<a routerLink="/rides" routerLinkActive="active">Rides </a></li>

это не так,

Первый - это относительный путь, а второй - абсолютный путь.

Поэтому, когда вы нажимаете на первую ссылку, angular добавляет routerLink к текущему пути, где, как и во второй, angular добавляет его к корню контекста приложения, не принимая во внимание текущий URL.

Я надеюсь, что кто-то выиграет от этого.:).

user3239630 18 июн '18 в 06:06 2018-06-18 06:06 · Answer 2 · 2018-06-18 06:06

{path: 'rides', component: RidesComponent} будет служить цели, вам не нужно pathMatch: 'full' здесь отдых выглядит хорошо для меня.

0

Источник

user3239630 18 июн '18 в 06:06

user3814835 18 июн '18 в 06:04 2018-06-18 06:04 · Answer 3 · 2018-06-18 06:04

Кажется, вы забыли добавить <base href="/">Пожалуйста, добавьте это в index.html.

0

Источник

user3814835 18 июн '18 в 06:04

user2160682 18 июн '18 в 06:36 2018-06-18 06:36 · Answer 4 · 2018-06-18 06:36

После некоторых испытаний я нашел решение, это была проблема с частью routerlink,

это изменение, которое я сделал,

 <li class="sub-menu"> <a routerLink="rides" routerLinkActive="active">Rides </a></li>

Теперь это работает нормально.

0

Источник

user2160682 18 июн '18 в 06:36

user10918257 01 май '20 в 18:34 2020-05-01 18:34 · Answer 5 · 2020-05-01 18:34

<li class="sub-menu"> <a routerLink="/dash/rides" routerLinkActive="active">Rides </a></li>

0

Источник

user10918257 01 май '20 в 18:34