Switching View/Tabs in React

[oxdigital]

F7 v6 React…
I have a number of Views as Tabs in my project, when clicking a link within one of the Views I want to switch to another View and (ideally) load the url within it - or at least just switch to the correct view/tab.

I can see there is the ‘view’ attr on ListView which is what is being clicked, but it does nothing when this is set to the id of the View that I want to switch to. As expected, removing the view attr loads the url in the current view.

I have tried using a Link rather the ListItem to link to the view/tab, this does seem to open a new view/tab, but doesn’t update the Tabbar. Is there a way to programatically set the correct tab?

What is the best way of having 4 views, controlled by a Tabbar but allowing links within the pages to switch between tabs - ideally also opening a url and or passing params.

I can see this answer below suggests it’s not/wasn’t possible for routing, but is there not any way to switch tab/views from a link within another view?

Are Views as Tab with routable feauture supported with react?

I’m trying to understand the routable tabs, but i can’t make it working. Currently I’m doing some test using the default f7 react tamplate that use Views as Tab but without success. Are Views as Tab with routable feauture supported with react? Thanks

{/* Views/Tabs container */}
<Views tabs className="safe-areas">

  {/* Tabbar for switching views-tabs */}
  <Toolbar tabbar labels bottom>
    <Link tabLink="#view-home" tabLinkActive text="Home" />
    <Link tabLink="#view-browse"  text="Browse" />
    <Link tabLink="#view-map" text="Map" />
  </Toolbar>

  <View id="view-home" main tab tabActive url="/" animate/>
  <View id="view-browse" name="browse" tab url="/browse/" animate/>
  <View id="view-map" name="map" tab url="/map/" animate/>

</Views>

The list item link, from within #view-home…

 <List>
          <ListItem 
          view={'#view-browse'}
          link={'/browse/category'}
          title={'browse'}>
            </ListItem> 
          )
        })
      }
    </List>

The alternative Link, which does seem to open the view/tab but doesn’t update the tab bar…

<Link tabLink='#view-browse' tabLinkActive>Test</Link>

I guess I can do the above and manually add/remove the class ‘tab-link-active’ from the Tabbar link? However this seems to upset the tabs and they start to become unreliable showing active or not.

Update - I now realise the Tabs API can be used, onclick with a function like the below code - it even seems to activate the correct tab button without specifying its ID as the second param

function clickBrowseButton(){
  f7.tab.show('#view-browse')
};

TIA