When directing to a particular route using router.navigate, the page is reloaded and the new route is added in router.url. Below is the code snippet for navigation with router.navigate.
navigateTo(){
const queryParams = {}
queryParams['siteNo'] = '1234';
this.router.navigate(['/sites'], { queryParams: queryParams });
}
To navigate without reloading the page and still update the router.url, I decided to use location.replaceState. Here's the code for navigating with location.replaceState.
navigateTo(){
let url = '/sites';
let queryString = '?siteNo=1234'
this.location.replaceState(url, queryString);
}
Looking for a solution where navigation to a specific route happens without page reload while updating the router.url.
app.route.ts
export const appRoutes: Routes = [
{
path: 'sites',
component: SitesComponent
}];