Блог

У меня есть домашняя страница, на которой есть 3 навигационные кнопки:

• Кнопка «Команда»
• Кнопка «Все»
• «Индивидуальная» кнопка

Это кнопки навигации, они перенаправляют пользователя, кнопки «Команда» и «Все» перенаправляют пользователя на один и тот же компонент, но с разными корнями.

При нажатии на «Team» btn пользователь перенаправляется на root ‘/’ и выбирается «Team» btn. Это нормально.

Это проблема:

Когда пользователь нажимает «Все» btn, выбирается btn. Но btn «Team» все еще выбран.

Проблема в том, что два разных маршрута являются одним и тем же компонентом.

Я устанавливаю 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, без того стиля фона, который он ранее получил.

Как это активировать?

Вы проверяете наличие activeRouteAll для установки фона, но вам следует проверить текущее местоположение, и в зависимости от этого вы можете установить фон. Попробуйте использовать this.props.location

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