Question

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

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

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

单击“团队” btn时，将用户重定向到根目录“ /”，并选择了“团队” btn。没关系。

这是问题：

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

问题是两个差异路由的同一组成部分。

当用户点击“所有”按钮时，我设置了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：我在“团队视图”页面上，而btn团队视图的背景使他很活跃

第2步。单击所有btn和“团队视图” btn需要的内容，而无需使用以前获得的背景样式。

如何激活它？

Answer 1

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

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

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

1 个答案: