Как отменить выбор кнопки после переключения между двумя компонентами с разными маршрутами? - PullRequest
Новая
       5

Как отменить выбор кнопки после переключения между двумя компонентами с разными маршрутами?

0 голосов
/ 26 марта 2019

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

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

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

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

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

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

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

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

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

1 Ответ

0 голосов
/ 26 марта 2019

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

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

...