I have angular library , which basically has 2 pages economics&cashflow, and here is the route configurations for it,

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: ScenariosComponent
  },
  {
    path: 'cashflow',
    component: CashflowComponent,
    pathMatch: 'full',
    data: {
      queryParams: {
        id: 'scenarioId',
        name: 'scenarioName'
      }
    }
  },
  {
    path: '**',
    component: ScenariosComponent
  }
];

from economics page, user clicks on scenario card and it navigates to cashflow page with queryparams id&name like this :baseurl/economics/cashflow?id=d72eb05a-48ae-4fa7-80fe-8b4e6617f1f1&name=jhk.

it works well in normal usecase but behaves incorrect on page refresh,

• on cashflow page refresh, it navigates to economics page(though in url it is shows :baseurl/economics/cashflow?id=d72eb05a-48ae-4fa7-80fe-8b4e6617f1f1&name=jhk)

• and if user tries to navigate back again it does not work, duplicate route gets added to the url (economics/cashflow?id=d72eb05a-48ae-4fa7-80fe-8b4e6617f1f1&name=jhk/cashflow?id=d72eb05a-48ae-4fa7-80fe-8b4e6617f1f1&name=jhk)

Is there any way to fix this?