Створення та Керування Навігацією

Після налаштування базового маршрутизації, впровадження лінивого завантаження та додавання компонентів-запасних варіантів, наступним важливим кроком є надання користувачам можливості переміщатися сторінками нашого застосунку.

React Router надає компоненти Link та NavLink, які є аналогами HTML-тегу a. Ці компоненти дозволяють оновлювати URL-адресу в адресному рядку браузера без перезавантаження всієї сторінки.

import { Link } from "react-router-dom";

<Link to="path_value">Any text</Link>

• Властивість to визначає цільовий маршрут або шлях, за яким має переходити посилання. Замініть path_value на потрібний шлях;
• Any text — це вміст, який буде відображатися як посилання. Ви можете замінити його на бажаний текст або JSX-вміст.

Приклад

Створимо окремий компонент під назвою Bar для керування навігацією у всьому застосунку. Ось код:

const Bar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contacts">Contacts</Link>
        </li>
      </ul>
      <hr />
    </nav>
  );
};

Цей код визначає функціональний компонент під назвою Bar, який представляє навігаційну панель. Він відображає елемент <nav>, що містить невпорядкований список <ul> із трьома елементами списку <li>. Кожен елемент списку містить компонент Link з бібліотеки react-router-dom.

• Рядок 6: Перший компонент Link відповідає посиланню на сторінку "Home";
• Рядок 9: Другий компонент Link відповідає посиланню на сторінку "About";
• Рядок 12: Третій компонент Link відповідає посиланню на сторінку "Contacts".

Ці компоненти Link забезпечують навігацію всередині застосунку, оновлюючи URL-адресу в адресному рядку браузера без перезавантаження сторінки. Коли користувач натискає на посилання, активується відповідний маршрут або шлях, і буде відображено пов'язаний компонент.