如何使材料ui选项卡仅对特定url处于活动状态

Question

所以我正试图弄清楚如何处理冲突——我看到的一个问题是在右侧选项卡上设置活动选项卡指示器。所以我的导航栏中有一些选项卡，可以将您带到三条不同的路线。然而，有两条路线非常相似。

<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
});
};

所以有两条路线非常相似。带有关联路线"/sale/shoes"的选项卡和带有关联路线的选项卡"/sales"。我想得到它，这样"销售"选项卡应该只对路线"/销售"有效。但似乎如果用户在"销售/鞋子"路线上，"销售"选项卡将处于活动状态。我猜是因为这两个标签都有一条包含"销售"的路线。有什么办法解决这个问题吗？

Answer 1

据我所知，您可能希望切换到使用具有内置路由路径匹配的NavLink组件，然后只需要指定NavLink的exact属性即可使其与给定的URL路径名完全匹配。

<Tabs
indicatorColor="primary"
value={this.state.tabsValue}
onChange={this.setTabsValue}
>
<Tab
classes={{ selected: classes.selectedTab }}
className={classes.tab}
label="Main"
value="main"
component={NavLink}
to="/main"
exact
/>
<Tab
classes={{ selected: classes.selectedTab }}
className={classes.tab}
label="Shoes"
value="shoes"
component={NavLink}
to="/sale/shoes"
exact
/>
<Tab
classes={{ selected: classes.selectedTab }}
className={classes.tab}
label="Sale"
value="sale"
component={NavLink}
to="/sale"
exact
/>
</Tabs>