如何修复角度路线在重新加载时不起作用

Question

我是 Angular 新手，我正在尝试让我的路由器正常工作。/基本上，我有一个带有路由器链接的主页/courses，该链接运行良好，但是当我重新加载/courses（或输入地址）时，它会将我带回到主页，如果我再次单击路由器链接，它将带我到/courses/courses哪个是相同，/courses但这似乎是错误的。另外，如果我输入，/courses/则会收到 404 错误。

如果有人对如何解决这个问题有任何建议，我将非常感激！

// app-routing.module.ts is:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {CoursesComponent} from './courses/courses.component';
import {ReviewsComponent} from './reviews/reviews.component';
import { CommonModule } from '@angular/common';

const routes: Routes = [
  {
    path: 'courses',
    component: CoursesComponent
  },
  {
    path: 'courses/:id',
    component: ReviewsComponent
  }
];

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

<!-- app.component.html -->
<h1>Course Reviews</h1>
<div>
  <nav>
    <a [routerLink]="'/courses'">Courses</a>
  </nav>
  <router-outlet></router-outlet>
</div>

//courses.component.ts

import {Component, OnInit } from '@angular/core';
import { CourseService } from '../services/course.service';
import { Router} from '@angular/router';
import { AddCourseComponent } from '../add-course/add-course.component';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.css']
})

export class CoursesComponent implements OnInit {
  dataSource  = [];
  responseArray: string;
  courseList = new Array<Course>();
  selectedCourse: Course;


  constructor(private courseService: CourseService,
              private router: Router,
              private modalService: NgbModal) {
    this.courseService.newDataAdded.subscribe(
      (st: string) => {
        this.fetchCourses();
      }
    );
  }

  ngOnInit() {
    this.fetchCourses();
  }

  fetchCourses(): void {
    this.courseService.getFirstPage().subscribe((data: Array<object>) => {
      this.dataSource  =  data;
      this.responseArray = JSON.stringify(data);
      const obj: MyObj = JSON.parse(this.responseArray);
      for (const i of obj.results) {
        const courseObj: string = JSON.stringify(i);
        const course: Course = JSON.parse(courseObj);
        this.courseList.push(course);
      }
    });
  }
  onSelect(course: Course): void {
    this.selectedCourse = course;
    console.log('selected course is ' + this.selectedCourse.course_name);
    this.router.navigate(['/courses', this.selectedCourse.id]);
  }
  onButtonClick(): void {
    const modalRef = this.modalService.open(AddCourseComponent);
    modalRef.result.then((result) => {
      console.log(result);
      this.courseService.newDataAdded.emit('new data added successfully');
    }).catch((error) => {
      console.log(error);
    });
  }
}

interface MyObj {
  count: number;
  next: string;
  previous: string;
  results: Array<string>;
}

HTML 文件是：

<ul>
  <li *ngFor="let course of courseList" (click)="onSelect(course)">
    <span class="badge">{{course.department}}</span> <a [routerLink]="['/courses', course.id]"> {{course.course_name}} </a>
  </li>
</ul>
<button type="button" class="btn btn-med btn-outline-primary" (click)="onButtonClick()">Add a new course</button>

感谢您提前提供任何帮助！

Answer 1

如果有人仍在寻找此问题的答案（重新加载并收到错误 404 时）：在定义路由的 app-routing.module.ts 中，只需添加

@NgModule({imports: [RouterModule.forRoot(routes, { useHash: true })]

在这种情况下，上面的代码将如下所示：

@NgModule({
  imports: [RouterModule.forRoot(routes,  { useHash: true }),
  CommonModule],
  exports: [RouterModule]
})

学分： https://medium.com/wineofbits/angular-2-routing-404-page-not-found-on-refresh-a9a0f5786268

Answer 2

一切似乎都是正确的，但我认为你错过了一些小东西 - 尝试添加空路径并将其重定向到这样的任何路径

const routes: Routes = [
  {
    path: 'courses',
    component: CoursesComponent
  },
  {
    path: 'courses/:id',
    component: ReviewsComponent
  },
  {
    path: ''
    component: HomeComponent
  }
];

我认为这段代码丢失了 - 添加此代码后检查场景

如果您不使用，HomeComponent则可以使用redirectTo: 'courses'和pathMatch: 'full'

快乐编码:)