Duplicated path after refresh-CodePudding

I'm facing the issue with duplicated path. For testing purpose I made a TestingComponent to demonstrate.

My code:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'testing',
    pathMatch: 'full'
  },
  {
    path: 'testing',
    component: TestingComponent
  }

];

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


@NgModule({
  declarations: [
    AppComponent,
    TestingComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,

  ],
  providers: [DatePipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

In app component html:


<router-outlet></router-outlet

The issue is specific for the project, when I made a new project everything works fine, but in this one:

When I enter localhost:4200 it redirects me to localhost:4200/testing (it is correct) When I refresh page it is redirecting me from localhost:4200/testing to localhost:4200/testing/testing (which is strange and it should not work like this).

I have already tried changing order of the routes but it not helped at all.

CodePudding user response：

You are navigating relatively. Prefix the url with a / to navigate absolutely.

A URL to redirect to when the path matches.

Absolute if the URL begins with a slash (/), otherwise relative to the path URL. >Note that no further redirects are evaluated after an absolute redirect.

When not present, router does not redirect.

  {
    path: '',
    redirectTo: '/testing',
    pathMatch: 'full'
  },

CodePudding user response：

It's working after adding 'pathMatch: 'full'',

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
  },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

https://stackblitz.com/edit/angular-ivy-jnaiij?file=src/app/app.routing.ts