Javascript ERROR 错误：未捕获（承诺），无法匹配任何路线。网址段

ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

提问by The Dead Man

I have simple navigation in angular 6 app,

我在 angular 6 应用程序中有简单的导航，

Here is HTML

这是 HTML

<nav class="main-nav>
<ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
            <li class="main-nav__item">
              <a class="main-nav__link" routerLink="['/']" routerLinkActive="active">Home</a>
            </li>
            <li class="main-nav__item"> 
              <a class="main-nav__link" routerLink="['/about']" routerLinkActive="active">About us</a>
            </li>

          </ul>
</nav>

here is app.routing module

这是 app.routing 模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProjectsComponent } from './components/projects/projects.component';
const routes: Routes = [
  { path: 'about', component: AboutComponent },
  { path: 'what', component: WhatwedoComponent },
  { path: 'contacts', component: FooterComponent },
  { path: 'projects', component: ProjectsComponent},
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
  ],
  declarations: []
})
export class AppRoutingModule { }

Here is app module

这是应用程序模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgStickyDirective } from 'ng-sticky';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AppRoutingModule } from './/app-routing.module';
import { MainNavDirective } from './layout/main-nav.directive';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { WhyChooseUsComponent } from './components/why-choose-us/why-choose-us.component';
import { TeamComponent } from './components/team/team.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { ClientsComponent } from './components/clients/clients.component';
import { HowItWorksComponent } from './components/how-it-works/how-it-works.component';
import { PartnersComponent } from './components/partners/partners.component';

@NgModule({
  declarations: [
    AppComponent,
    NgStickyDirective,
    MainLayoutComponent,
    MainNavDirective,
    AboutComponent,
    WhatwedoComponent,
    FooterComponent,
    WhyChooseUsComponent,
    TeamComponent,
    ProjectsComponent,
    ClientsComponent,
    HowItWorksComponent,
    PartnersComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

when I run my app and click about us i get the following error :

当我运行我的应用程序并点击我们时，我收到以下错误：

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '%5B'/about'%5D'
Error: Cannot match any routes. URL Segment: '%5B'/about'%5D'
    at

I have tried different combination to solve the issue but still not able to get rid of this error,

我尝试了不同的组合来解决这个问题，但仍然无法摆脱这个错误，

what am I doing wrong in my code? any help will be helpfull thanks

我的代码做错了什么？任何帮助都会有所帮助谢谢

采纳答案by SiddAjmera

When you use routerLink like this, then you need to pass the value of the route it should go to. But 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.

当你像这样使用 routerLink 时，你需要传递它应该去的路由的值。但是当你使用routerLink与物业绑定语法，就像这样：[routerLink]，那么它应该被赋予属性，它的值将是它应该对用户进行导航的路线的名称。

So to fix your issue, replace this routerLink="['/about']"with routerLink="/about"in your HTML.

因此，要解决您的问题，替换此routerLink="['/about']"与routerLink="/about"您的HTML。

There were other places where you used property binding syntax when it wasn't really required. I've fixed it and you can simply use the template syntax below:

在其他地方，您在并不真正需要时使用了属性绑定语法。我已经修复了它，你可以简单地使用下面的模板语法：

<nav class="main-nav>
  <ul 
    class="main-nav__list" 
    ng-sticky 
    addClass="main-sticky-link" 
    [ngClass]="ref.click ? 'Navbar__ToggleShow' : ''">
    <li class="main-nav__item" routerLinkActive="active">
      <a class="main-nav__link" routerLink="/">Home</a>
    </li>
    <li class="main-nav__item" routerLinkActive="active"> 
      <a class="main-nav__link" routerLink="/about">About us</a>
    </li>
  </ul>
</nav>

It also needs to know where exactly should it load the template for the Component corresponding to the route it has reached. So for that, don't forget to add a <router-outlet></router-outlet>, either in your template provided above or in a parent component.

它还需要知道它到底应该在哪里加载与其到达的路由对应的组件的模板。因此，为此，不要忘记<router-outlet></router-outlet>在上面提供的模板或父组件中添加 。

There's another issue with your AppRoutingModule. You need to export the RouterModulefrom there so that it is available to your AppModulewhen it imports it. To fix that, export it from your AppRoutingModuleby adding it to the exportsarray.

您的AppRoutingModule. 您需要RouterModule从那里导出，以便AppModule在导入时可以使用它。要解决此问题，请AppRoutingModule通过将其添加到exports数组中将其导出。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProjectsComponent } from './components/projects/projects.component';
const routes: Routes = [
  { path: 'about', component: AboutComponent },
  { path: 'what', component: WhatwedoComponent },
  { path: 'contacts', component: FooterComponent },
  { path: 'projects', component: ProjectsComponent},
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
  ],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }

回答by rtrigo

In case you need the []syntax, useful for "edit forms" when you need to pass parameters like idwith the route, you would do something like:

如果您需要[]对“编辑表单”有用的语法，当您需要通过路由传递id 等参数时，您可以执行以下操作：

[routerLink]="['edit', business._id]"

As for an "about page" with no parameters like yours,

至于没有像你这样的参数的“关于页面”，

[routerLink]="/about"

or

或者

[routerLink]=['about']

will do the trick.

会做的伎俩。

回答by Sajeetharan

As the error says your router link should match the existing routes configured

由于错误表明您的路由器链接应与配置的现有路由匹配

It should be just routerLink="/about"

应该只是 routerLink="/about“