Как установить «активный» класс в React и CSS?

Question

У меня есть навигация в моем приложении React. Однако мне бы хотелось, чтобы цвет навигации изменился, если на этой странице.

Вот мой код Я добавил активное имя_класса к элементам.

        <Link to='/'>
          <li className='menu-list-item menu-list-logo   active'>Gatsby's</li>
        </Link>
        <Link to='/drink'>
          <li className='menu-list-item active'>Drink</li>
        </Link>
        <Link to='/food'>
          <li className='menu-list-item active'>Food</li>
        </Link>
        <Link to='contact'>
          <li className='menu-list-item active'>Contact</li>
        </Link>

В настоящее время навигационные ссылки имеют фон: черный. Я хочу изменить цвет, скажем, красный. PS Я использую стандарт CSS для стилей.

Answer 1

На самом деле есть свойство activeClassName в NavLink реагирующего маршрутизатора.

Это выглядит так

Import { NavLink } from 'react-router-dom`
...

<NavLink exact activeClassName="your_active_css_classname" className="normal_css">Link name </NavLink>

Не забудьте добавить точное. Подробнее здесь: https://reacttraining.com/react-router/web/api/NavLink

Answer 2

Легкий / быстрый способ сделать это - изменить класс в родительском элементе DOM этих <Link> элементов ... оттуда CSS будет делать то, что работает лучше всего.

Предполагается, что эти <Link> ... </Link> теги заключены в тег <nav> ... </nav>, который является родительским элементом DOM.

{ (onThePage) ? <nav className="onThePageClass"> ... </nav> : <nav className="normalClass"> ... </nav> }

Попробуйте использовать другой ресурс MVCE, если вы застряли, чтобы он послужил хорошим примером для других, ищущих за помощь