Angular 项目的路由无法正常工作

Question

当我进入 gif 页面时，它不显示 gif，当我进入 for ex: /upload 时，它显示错误消息“无法匹配任何路由。URL 段：“上传”

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GifComponent } from '../gif/gif.component';
import { GifDetailComponent } from '../gif/gif-detail.component'; // Import GifDetailComponent
import { UploadComponent } from '../Upload/upload.component'; // Import UploadComponent

const routes: Routes = [
  { path: 'gifs/:title', component: GifComponent },
  { path: 'gifs/category/:category', component: GifComponent },
  { path: 'upload', component: UploadComponent },
];

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

<!-- app.component.html -->
<div class="container">
  <div class="categories">
    <h2>Categories</h2>
    <ul>
      <li *ngFor="let category of categories">{{ category }}</li>
    </ul>
  </div>
  <div class="gifs">
    <h1 class="title">Gifs</h1>
    <div *ngFor="let gif of gifs">
      <h2 class="title">
        <a [routerLink]="['/gifs', gif.title]" (click)="redirectToGif(gif)">{{ gif.title }}</a>
      </h2>
      <img class="gif" [src]="gif.src" alt="{{ gif.title }}" (click)="redirectToGif(gif)">
      <a [routerLink]="['/gifs', gif.title]">View Gif</a>
    </div>
  </div>
</div>
<router-outlet></router-outlet>

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { RootComponent } from './root.component'; // Import RootComponent
import { GifDetailComponent } from '../gif/gif-detail.component'; // Import GifDetailComponent
import { UploadComponent } from '../Upload/upload.component'; // Import UploadComponent
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    RootComponent, // Declare RootComponent
    GifDetailComponent,
    UploadComponent,
  ],
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    RouterModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [ RootComponent ] // Bootstrap RootComponent
})
export class AppModule { }

有我的github：https://github.com/BekaEn/GifApp/blob/GifApp/

我认为某处可能只有一个错误，但我找不到它。花了很多时间才找到它但一无所获。希望有人能找到答案

Answer 1

我查看了你的 GitHub，你定义了两次路由，一次在 AppRoutingModule 中，一次在 app.route.ts 中，导出一个空数组。尝试在 app.route.ts 中移动您的路线，并且仅定义一次路线。