javascript - 如何使 Material 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”的选项卡和具有关联路由“/sale”的选项卡。我想得到它，以便“销售”选项卡只对路线“/销售”有效。但似乎如果用户在“/sale/shoes”路线上，则“销售”选项卡将处于事件状态。我猜是因为这两个选项卡都有一条包含“销售”的路线。有什么办法可以解决这个问题吗？

Answer 1

据我所知，您似乎可能想切换到使用具有内置路由路径匹配的 NavLink 组件，然后只需要指定NavLink 的 exact Prop ，使其与给定的 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>