How can I reset view router when click on tabs

Questions
1

I have my main view with my views and my toolbar. What I would like to do is when I click on a tab, it will reset the view as it was before navigating inside.
Example:
I click on the lower Categories tab
I click on a specific category
I click again on the lower Categories tab

My routes are in a routes.js file.

I would like the view to return to the list of categories
I want the same behavior on the other tabs

How can I do that ?
Thanks

render() {
const mainViewProps = { main: true, tabActive: true };
const defaultLinkProps = { tabLinkActive: true, ref: this.mainPageLink };
return (
  <TabContext.Provider value={this.state}>
    <Views tabs>
      <View
        id="tab-today"
        name="today"
        onTabShow={() => this.setState({ currentTab: 'today' })}
        tab
        {...(mainTab === 'today' ? mainViewProps : {})}
      >
        <TodayPage onReady={this.closeSplashScreen} />
      </View>
      <View
        id="tab-categories"
        name="categories"
        onTabShow={() => this.setState({ currentTab: 'categories' })}
        tab
        {...(mainTab === 'categories' ? mainViewProps : {})}
      >
        <CategoriesPage />
      </View>
      <View
        id="tab-community"
        name="community"
        onTabShow={() => this.setState({ currentTab: 'community' })}
        tab
        {...(mainTab === 'community' ? mainViewProps : {})}
      >
        <CommunityPage />
      </View>
      <View
        id="tab-search"
        name="search"
        onTabShow={() => this.setState({ currentTab: 'search' })}
        tab
        {...(mainTab === 'search' ? mainViewProps : {})}
      >
        <SearchPage />
      </View>
      <View
        id="tab-settings"
        name="settings"
        onTabShow={() => this.setState({ currentTab: 'settings' })}
        tab
        {...(mainTab === 'settings' ? mainViewProps : {})}
      >
        <SettingsPage />
      </View>

      <Toolbar tabbar labels position="bottom">
        <Link
          tabLink="#tab-today"
          style={{ order: tabOrder.indexOf('today') }}
          {...(mainTab === 'today' ? defaultLinkProps : {})}
        >
          <i className="icon ion-ios-today" />
          <span className="tabbar-label">
            <FormattedMessage id="press_yui_tabs_today" />
          </span>
        </Link>
        <Link
          tabLink="#tab-categories"
          style={{ order: tabOrder.indexOf('categories') }}
          {...(mainTab === 'categories' ? defaultLinkProps : {})}
        >
          <i className="icon ion-ios-apps" />
          <span className="tabbar-label">
            <FormattedMessage id="press_yui_tabs_categories" />
          </span>
        </Link>
        <Link
          tabLink="#tab-community"
          style={{ order: tabOrder.indexOf('community') }}
          {...(mainTab === 'community' ? defaultLinkProps : {})}
        >
          <i className="icon ion-ios-people" />
          <span className="tabbar-label">
            <FormattedMessage id="press_yui_tabs_community" />
          </span>
        </Link>
        <Link
          tabLink="#tab-search"
          style={{ order: tabOrder.indexOf('search') }}
          {...(mainTab === 'search' ? defaultLinkProps : {})}
        >
          <i className="icon ion-ios-search" />
          <span className="tabbar-label">
            <FormattedMessage id="press_yui_tabs_search" />
          </span>
        </Link>
        <Link
          tabLink="#tab-settings"
          style={{ order: tabOrder.indexOf('settings') }}
          {...(mainTab === 'settings' ? defaultLinkProps : {})}
        >
          <i className="icon ion-ios-cog" />
          <span className="tabbar-label">
            <FormattedMessage id="press_yui_tabs_settings" />
          </span>
        </Link>
      </Toolbar>
    </Views>
  </TabContext.Provider>
2
  1. You need to load initial pages into Views via routes too, e.g. with specifying url property on View
  2. Add onClick handler to each link and call router.back() on related view.
<Link
  tabLink="#tab-settings"
  onClick={() => this.$f7.views.settings.router.back()}
  ...
>
  ...
</Link>
3

@Amelie_Sln I added a double tap listener which allows the user to go back to where they were in the view if they tap once, and reset to root if they tap twice within 300ms

<a href="#view-home" class="tab-link" @click="${resetHome}">

 let homeTaps = 0;

 const resetHome = ( e ) => {
   homeTaps++;
   setTimeout( function() { homeTaps = 0; }, 300 );
   if (homeTaps > 1) {
    $f7.views.main.router.navigate('/');
    $f7.views.main.router.clearPreviousHistory(); //optional
   }
 }

Probably could be done better with params passed into the reset function, but it works and I think it handles the user intent in both cases nicely.