Looking for a solution to address a conflict arising from the active tab indicator being located on the right tab. Within my navbar, I have tabs leading to three different routes, two of which are quite similar.
<Tabs indicatorColor="primary" value={this.state.tabsValue} onChange={this.setTabsValue}>
<Tab className={classes.tab}
label="Main"
value="main"
component={Link}
to="/main"
classes={{ selected: classes.selectedTab, }} />
<Tab className={classes.tab}
label="Shoes"
value="shoes"
component={Link}
to="/sale/shoes"
classes={{ selected: classes.selectedTab, }} />
<Tab className={classes.tab}
label="Sale"
value="sale"
component={Link}
to="/sale"
classes={{ selected: classes.selectedTab }} />
</Tabs>
setTabsValue = (obj, val) => {
this.setState({
tabsValue: val
});
};
The issue arises with the tabs associated with '/sale/shoes' and '/sale'. Ideally, the 'Sale' tab should only be active for the '/sale' route. However, if a user navigates to '/sale/shoes', the Sale tab remains active. This may be due to both routes containing 'sale'. Is there a way to resolve this conflict?