2
votes

Comment réparer l'itinéraire angulaire ne fonctionne pas lors du rechargement

Je suis nouveau sur Angular et j'essaie de faire fonctionner mon routeur. En gros, j'ai une page d'accueil à / avec un lien de routeur vers / courses qui fonctionne parfaitement mais quand je recharge / courses (ou saisis l'adresse in) cela me ramène à la page d'accueil et si je clique à nouveau sur le lien du routeur, cela m'amène à / courses / courses qui est le même que / courses mais ceci semble faux. De plus, si je tape / courses / , j'obtiens une erreur 404.

J'apprécierais vraiment que quelqu'un ait des conseils sur la façon de résoudre ce problème!

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

angular

2 commentaires

essayez de supprimer '/' dans le lien du routeur dans le fichier html, c'est-à-dire,

Essayez [routerLink] = "/ courses" au lieu de [routerLink] = "'/ courses'" dans app.component.html.

4 Réponses :

1
votes

Tout semble aller bien mais je pense que vous manquez quelque chose de petit - essayez d'ajouter un chemin vide et de le rediriger vers n'importe quel chemin comme celui-ci

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

Je pense que ce morceau de code est manquant - vérifiez le scénario après avoir ajouté ceci

Si vous n'utilisez pas HomeComponent , vous pouvez utiliser redirectTo: 'courses' et pathMatch: 'full'

Bon codage :)

1 commentaires

J'ai essayé, mais il traite localhost: 4200 / courses comme s'il s'agissait simplement de localhost: 4200 donc quand je le redirige, il va simplement vers localhost: 4200 / cours / cours à nouveau. De plus, le chemin vide fait en sorte que tout le contenu de la page d'accueil (juste l'en-tête et le lien du routeur pour le moment) s'affiche deux fois.

1
votes

Avez-vous essayé d'encapsuler votre lien avec [] dans votre routerLink?

Mon app.component.html est:

<h1>UW-Madison Course Reviews</h1>
<div>
  <nav>
    <a [routerLink]="['/courses']"> Courses </a>
  </nav>
  <router-outlet></router-outlet>
</div>

0 commentaires

1
votes

Vous devriez peut-être vérifier votre index.html pour voir ce qui est défini pour href de base. J'ai eu le même problème et le même réglage:

<base href="./">

a corrigé le problème. Je sais que ce message est obsolète mais peut être utile à quelqu'un d'autre.

0 commentaires

1
votes

Si quelqu'un cherche toujours une réponse à ce problème (lors du rechargement et de l'erreur 404): Dans votre app-routing.module.ts où vous définissez vos itinéraires, ajoutez simplement le

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

Dans ce cas, le code ci-dessus ressemblerait à:

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

0 commentaires