I have an Angular application consisting of the following routes:

const routes: Routes = [
  { path: '', component: IntroComponent },
  { path: 'personal-data', component: PersonalDataComponent },
  { path: 'questionnaire/:id', component: QuestionnaireComponent},
  { path: 'result', component: ResultComponent},
  { path: 'result/:id', component: ResultComponent}
]

The user starts in the IntroComponent, then goes to the PersonalDataComponent and then to 8 pages of QuestionnaireComponent which updates by id (for example /questionnaire/3), before ending up in the ResultComponent. This all happens by user clicks on buttons.

I would like when the route updates, the user does not see that in the url, so the url stays https://example.com but when the user presses the 'back' button in the browser, it does go back to the previous route.

I tried solving it using:

this.router.navigateByUrl(url, { skipLocationChange: true});

But that does not stack it in the browser history. Any ideas?