Различия

Показаны различия между двумя версиями страницы.

--- vikoristanja_klasa_active_v_navlink [2024/08/13 16:34]
tro создано
+++ vikoristanja_klasa_active_v_navlink [2024/08/13 16:37] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== Використаня класа 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>