I have angular app with routes to components

Here is routes file

  const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'main',
    children: [
      { path: 'faq', component: FaqComponent },
      { path: 'faq-mobile', component: FaqMobileComponent },
      { path: 'neighborhoods', component: NeighborhoodsComponent },
      { path: 'sales', component: SalesComponent },
      { path: 'commercials', component: CommercialsComponent },
      { path: 'rentals', component: RentalsComponent },
      { path: 'contact-us', component: ContactUsComponent },
      { path: 'list-with-us', component: ListWithUsComponent },
      { path: 'no-mobile', component: NoMobileComponent },
      { path: 'about-us', component: AboutUsComponent },
      { path: 'jobs', component: JobsComponent },
      { path: 'rooms', component: RoomsComponent },
      { path: 'join-the-hunt', component: JoinTheHuntComponent },
      { path: 'apply', component: ApplyMainComponent },
      { path: 'apply/:id', component: ApplyDetailsComponent },
      { path: 'home-mobile', component: HomeMobileComponent },
      { path: 'getting-approved', component: GettingApprovedComponent },
    ],
  },
];

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

When for example I use link http://localhost:4200/main/apply and just refresh link it returns me to http://localhost:4200

How I can make it to stay at http://localhost:4200/main/apply?

CodePudding user response：

Use { path: '', component: HomeComponent, pathMatch: 'full' } for your first route. When you refresh you get redirected to HomeComponent because it is the first route that matches your path.

Have a look at: In Angular, What is 'pathmatch: full' and what effect does it have?

CodePudding user response：

In my angular-project I have it like this:

{
    path: '', 
    redirectTo: 'dashboard',
    pathMatch: 'full'
}

--> so adding pathMatch: 'full' might do the trick here.