Как создать NavBar, который меняет цвет в соответствии с активной ссылкой в ​​activjsx? - PullRequest
Новая
       5

Как создать NavBar, который меняет цвет в соответствии с активной ссылкой в ​​activjsx?

0 голосов
/ 28 января 2020

Мой код выглядит следующим образом: 

  return (
    <Container>
      <div>
        <Router>
          <div className='menuStyle'>
            <Link to="/" id="about" data-cy="about">about</Link>{' '}
            <Link to="/ballrooms" id="home" data-cy="home" >ballrooms</Link>{' '}
            <Link to="/schools" id="schools" data-cy="schools">schools</Link>{' '}
            <Link to="/videos" id="videos" data-cy="videos">videos</Link>{' '}
            <Link to="/calendars" id="calendars" data-cy="calendars">calendar</Link>{' '}
            {' <'}{user.username}> logged in {' '}
            <button data-cy="logout" onClick={handleLogout}>logout</button>
          </div> ....

Ну, это только небольшая часть, но здесь я хочу изменить цвет в соответствии с активной ссылкой. Я знаю, что есть много способов, но я думаю, что я мог бы работать так много работы, что должен быть более легкий путь. Я использовал в основном приложение semanti c ui.

Стиль меню css, который я использовал, прост: 

.menuStyle {
  padding-top: 10;
  background: lightgray;
  margin-bottom: 5;
}

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

1 Ответ

0 голосов
/ 28 января 2020

Я думаю, что вам нужен компонент NavLink от Router. Похож на Link, но может принимать стилизацию. Проверьте это: Использование компонентов Link и NavLink для перехода к маршруту

...