如何在两个不同路径的组件之间切换后取消选择按钮？

Question

我有主页，有3个导航按钮：

• “团队”按钮
• “全部”按钮
• “个人”按钮

这是导航按钮，他们将重定向用户，“团队”和“所有”按钮重定向用户在相同的组件但不同的根。

当点击“Team”btn时，用户将重定向到根'/'并选择“Team”btn。那没问题。

这是个问题：

当用户单击“全部”btn时，选择btn。但“团队”btn仍然被选中。

问题是cus是两个不同的路径相同的组件。

当用户点击所有按钮时，我设置了activeRouteAll: true：

if (route === '/all') {
      return <IntakeSupervisorAnalytics  userRole={userRole} activeRouteAll={true} />
 }

这是一系列按钮：

let navigationButtons = [
      {
        content: 'Team View',
        onClick: () => runtime.navTo('/'),
        style: {
          // this is background-co when btn is active: '#BABBBC'
          backgroundColor: activeRouteAll ? '#E0E1E2bbb5b5' : '#BABBBC'
        }
      },
      {
        content: 'All',
        onClick: () => runtime.navTo('/all'),
        style: {
           // this is background when btn is active: '#BABBBC'
          backgroundColor: activeRouteAll ? '#BABBBC' : '#E0E1E2bbb5b5',
        }
      },
      {
        content: 'Individual View',
        onClick: () => runtime.navTo('/analytics'),
        style: { backgroundColor: '#E0E1E2bbb5b5' }
      }
    ]

第1步：我在Team View页面上，团队视图btn具有让他活跃的背景

步骤2.单击所有btn和“团队视图”btn需要没有之前得到的背景样式。

如何激活？

Answer 1

您正在检查activeRouteAll以设置背景，但您应该检查当前位置，并根据此情况设置背景。尝试使用this.props.location

https://reacttraining.com/react-router/web/api/location