Angular-即使没有href标记，routerLink仍会重新加载

Question

I have this code:

<a [routerLink]="['/user/', user.id]">
    {{ user.username }}
</a>

and this is routing.ts

// imports removed for clarity

const routes: Routes = [  
  { path: '', component: MainLayoutComponent, children: [
      { path: '', component: SidebarLayoutComponent, children: [
          { path: 'feed', component: HomefeedComponent },
          { path: 'discover', component:DiscoverComponent },
        ]
      },
      { path: 'user/:id', component: UserComponent },

    ]}
];

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

and I have two pages. Page 1 and Page 2. in both pages, one component is rendered: user-box-component.html, which has the above code.

but in Page 1, if I click on "username", it still reloads the page. in Page 2, it reloads only DOM, as expected.

any idea, why in Page 1, still hard reload is happening?

EDIT:

more infos: If I come to user page, and there the routerLink works well. But if I go to /discover page, there it makes page reload. can it be that it makes reload because there is no routerState root?

Answer 1

Check this stackblitz link . I created sample app.

https://stackblitz.com/edit/routerlink-xqqztn

Although it may not be exact your case scenario but i tried to do it as per your description

if this not solve issue please create stackblitz link