When routing using router Link it creates the URL correctly but does not redirect to component and displays data?

Question

I work on angular 7 app I face issue when route to component report details

using router link it only create URL link on browser but not redirect to

component report details until I click Enter.

It only working routing correctly if I use href .

If I use href or router link two both generate same URL link

http://localhost:4200/reportdetails?id=2028

If I use router Link I write router link as :

<a [routerLink]="['/reportdetails']" [queryParams]="{id: subrep.reportID}" >

When use href I write as below :

<a href="/reportdetails?id={{subrep.reportID}}">

approutingmodule.ts :

const routes: Routes = [
  {path:'',redirectTo: 'ReportCategoryComponent', pathMatch: 'full'},
  {path:'report',component:ReportCategoryComponent},
  {path:'reportdetails',component:ReportdetailsComponent},
  {path:'reportdetails/:id',component:ReportdetailsComponent}
];

so How to solve of issue of router link redirect ?

Answer 1

i see that queryparams is added in the the link provided in href and routerLink but in routing module id is added a url param. It works with href as it reloads the component.

as per the route provided in routing module the url to a particular id should be http://localhost:4200/reportdetails/2028

for routing with url params you have to subscribe to params from ActivatedRoute or to route with query params subscribe to queryParams

please find a routing demo here in stackblitz