vikoristanja_klasa_active_v_navlink [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

====== Використаня класа active в NavLink ======
Встановлюємо пакет
<code>
npm install classnames
</code>
приклад застосування в модульному режимі css. Класс navLink буде застосовуватись завжди. А класс active буде тоді, коли шлях в адресі буде дорівнювати шляху "to" в навігації. Тобто буде застосовуватись оформлення для класа "active" коли він поточний.
<code>
import { NavLink } from "react-router-dom";
import classNames from "classnames";
import css from "./Navigation.module.css";

function Navigation() {
  return (
    <nav className={css.navigation}>
      <NavLink to="/" className={({ isActive }) => classNames(css.navLink, { [css.active]: isActive })}>Home</NavLink>
      <NavLink to="/SignUp" className={({ isActive }) => classNames(css.navLink, { [css.active]: isActive })}>SignUp</NavLink>
      <NavLink to="/login" className={({ isActive }) => classNames(css.navLink, { [css.active]: isActive })}>login</NavLink>
    </nav>
  );
}

export default Navigation;
</code>