I've encountered an issue with Material UI tabs and need help figuring out how to resolve it. I have a navbar with three different tabs that link to separate URLs, but two of them are quite similar. Take a look at my code snippet below:
<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>
Below is the function setTabsValue that manages change events:
setTabsValue = (obj, val) => {
this.setState({
tabsValue: val
});
};
Additionally, the setTabsValue function is triggered when there is a change in props:
componentWillReceiveProps(nextProps) {
const newRoute = window.location.pathname.split('/')[2];
if (this.state.tabsValue !== newRoute) {
// update currentRoute for user ping
this.currentRoute = newRoute;
this.setState({
tabsValue: this.isMainRoute(newRoute)
});
}
The issue arises from the similarity in the last two tab routes containing the word 'sale'. This causes the active tab underline to appear under the 'Sale' tab even when navigating to 'Shoes', creating unexpected behavior.
When on the 'Sale' tab and switching to 'Shoes', after a prop update, the active tab reverts back to 'Sale', which is not intended.
If anyone has insights on this issue, your assistance would be greatly appreciated. Thank you!