BrowserHistory route path went wrong

hello, I have 3 pages which are continuous with each other according to the flow in this picture. There is a button on page 1 that will direct to page 2 (cari-tiket), then when it clicked, it will be directed to page 3 (cari-tiket/{id}).

I enabled this feature in f7params because I wanted the ‘back’ navigation to work

const f7params = {
      view: {
        stackPages: true,
        browserHistory: true,
        browserHistoryInitialMatch: true,
        browserHistorySeparator: '',
        browserHistoryRoot: '',
        browserHistoryTabs: 'push',
        browserHistoryOnLoad: true,

and initially the URL was only the domain (localhost:5173), now the path is visible (localhost:5173/cari-tiket). and what happened was that when I made it to page 3, I expected it to return to the ‘cari-tiket’ page. but what I get is that it displays page 1 with the URL of page 2 like this.

How can this happen?

I also have problems moving views as tabs as has been discussed here . But it seems there is no solution yet