Модуль 24

Routing: базова навігація

Ось готовий урок, створений за твоїм майстер-промптом. Я обрав контекст Web Development (Single Page Applications), використовуючи синтаксис, схожий на React Router, оскільки це найбільш класичний приклад того, навіщо нам "роутинг" у сучасному вебі.

🎓 Урок: Routing (Базова навігація)

(Стиль: CS50 / David Malan)

1. 🔥 Вступ: Проблема та мотивація

Уявіть, що ви зайшли у величезний офісний центр. Це наш старий вебсайт. Кожен кабінет — це окрема кімната. Хочете в бухгалтерію? Виходите в коридор, йдете до дверей 205, відкриваєте, заходите. Хочете в їдальню? Виходите, йдете коридором, відкриваєте двері 101.

Кожного разу ви робите фізичну дію: вихід, перехід, вхід. У світі браузера це — повне перезавантаження сторінки. Екран блимає білим, всі картинки завантажуються заново, сервер напружується.

А тепер уявіть магічну кімнату. Ви стоїте на місці. Ви кажете: "Хочу в бухгалтерію!" — клац! Стіни миттєво змінюють колір, з’являються столи, звіти. Ви кажете: "Хочу в їдальню!" — клац! Ті самі стіни перетворюються на столики з їжею. Ви нікуди не ходили. Ви не перезаходили. Це відбулося миттєво.

Питання до вас: Як ви думаєте, де користувачу приємніше знаходитись — у коридорі, бігаючи між дверима, чи в магічній кімнаті?

Ось тут і з’являється Routing (Маршрутизація) у сучасних додатках (SPA — Single Page Applications). Без нього ми змушені "перезавантажувати світ" при кожному кліку. З ним — ми створюємо ілюзію навігації, залишаючись на одній сторінці.

2. 🧠 Теоретична база (без сухої академічності)

Давайте розберемо, що відбувається "під капотом".

Коли ви вводите instagram.com/messages, сервер віддає вам одну сторінку (index.html) і величезний файл JavaScript. Все. Більше сервер сторінок не надсилає.

Далі в гру вступає Router (Маршрутизатор). Це як регулювальник на перехресті.

Як це працює? (Логіка ілюзії)

  1. URL змінюється. Користувач клікає на кнопку, адреса в рядку браузера змінюється на /messages.
  2. Браузер завмирає. Роутер каже браузеру: "Тссс! Не відправляй запит на сервер! Я сам розберуся". (Це робиться через History API).
  3. Підміна контенту. Роутер дивиться на нову адресу, звіряється зі своєю картою і каже: "Ага, /messages — це компонент 'Повідомлення'. Видаляй 'Головну', малюй 'Повідомлення'!".

Що треба запам’ятати залізобетонно:

  • Path (Шлях): Частина URL після домену (наприклад, /about).
  • Component (Компонент): Шматок коду (інтерфейсу), який ми показуємо для конкретного шляху.
  • Link (Посилання): Спеціальна кнопка, яка змінює URL, але не перезавантажує сторінку.

Інтуїтивно: Роутинг — це просто велика конструкція if / else. Якщо адреса /home -> покажи Дім. Якщо адреса /contact -> покажи Контакти. Інакше -> покажи помилку 404.

3. 🧪 Приклади (від простого до реального)

Уявимо, що ми пишемо код на React (найпопулярніша бібліотека сьогодні), але логіка однакова всюди.

Приклад 1: Мінімальний

У нас є два "екрани": Home (Головна) і About (Про нас).

// Уявіть, що це ваша карта доріг
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

Питання до студента: Що, на вашу думку, побачить користувач, якщо введе в браузері просто mysite.com? А якщо mysite.com/cat?

Пояснення: 1. На mysite.com (це шлях /) він побачить компонент <Home />. 2. На /cat він побачить... нічого. Або пустий екран. Чому? Бо в нашій карті немає маршруту для котів! Роутер розгубиться.

Приклад 2: Типовий (з навігацією)

Ми не змушуємо юзера писати адреси вручну. Ми даємо кнопки.

// Меню навігації
<nav>
  <Link to="/">Головна</Link>
  <Link to="/about">Про нас</Link>
</nav>

// Карта маршрутів
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="*" element={<NotFound />} />  {/* 👈 Зверніть увагу сюди */}
</Routes>

Питання до студента: Я додав дивний шлях path="*". Як гадаєте, навіщо ця зірочка?

Пояснення: Зірочка * означає "все інше". Це пастка для будь-яких адрес, які ми не передбачили. Якщо користувач введе /cat, /dog або /blablabla, спрацює цей маршрут і покаже сторінку помилки 404 (NotFound). Це як "Бюро знахідок" для загублених користувачів.

4. 🛠 Практична частина

Прийшов час бруднити руки кодом. Уявіть, що ви працюєте над сайтом інтернет-магазину.

🔹 Завдання 1: Повторення Напишіть структуру роутингу для трьох сторінок: 1. / -> Головна (MainPage) 2. /catalog -> Каталог (Catalog) 3. /cart -> Кошик (Cart)

🔹 Завдання 2: Зміна умов Менеджер каже, що сторінка "Кошик" тепер має бути доступна за адресою /basket, а не /cart. Змініть код.

🔹 Завдання 3: Виправ помилку Студент-стажер написав код для посилання: <a href="/catalog">Перейти в каталог</a> Сайт працює, але щоразу при кліку екран "блимає" (перезавантажується). Як виправити це, використовуючи спеціальний компонент (наприклад, <Link>), щоб зберегти магію SPA?

🔹 Завдання 4: Міні-кейс Ви робите сайт для піцерії. У вас є: * Меню * Контакти * Акція "Безкоштовна Кола" (окрема лендінг-сторінка) Придумайте URL-шляхи для цих сторінок. Який шлях має бути головним?

🔹 Завдання 5: Питання «А що, якщо…» Що станеться, якщо у нас буде два маршрути з однаковим шляхом?

<Route path="/contact" element={<PhoneNumbers />} />
<Route path="/contact" element={<Map />} />

Який з них покажеться? Перший? Другий? Обидва? (Спробуйте здогадатися логічно).

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі в темі роутингу?

1. Типова помилка новачка: HTML-мислення. Новачки часто використовують стандартний тег <a href="...">. * Наслідок: Ви вбиваєте весь сенс Single Page Application. Браузер викидає весь завантажений JavaScript і качає його наново. Це повільно і непрофесійно. * Як думає профі: "Я маю змінити URL, але не дати браузеру перезавантажитись. Тільки компонент <Link> (або аналог)!"

2. Чистота URL. Профі знає: URL — це інтерфейс. Він має бути читабельним. * Погано: /p?id=123&action=view * Добре: /products/iphone-15 Користувач має розуміти, де він, просто глянувши в адресний рядок.

3. "Джерело істини". Досвідчений розробник думає про URL як про стан додатка. Якщо я скопіюю посилання і скину другу, він має побачити те саме, що і я. Якщо ваша сторінка змінюється, але URL залишається старим — ви зламали цю логіку.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? Ми відмовилися від біганини коридорами (старий веб) і побудували кімнату-трансформер (SPA).

Що ви тепер вмієте: 1. Пояснити різницю між href та клієнтським роутингом. 2. Налаштовувати карту маршрутів: який URL яку сторінку відкриває. 3. Створювати сторінку 404 для "загублених" мандрівників.

🚀 Тизер наступного уроку: Зараз ми вміємо ходити по кімнатах: /catalog, /about. Але що, як у нас в каталозі 1000 товарів? Ми ж не будемо писати 1000 маршрутів вручну (/product/1, /product/2...)? На наступному уроці ми навчимо наш роутер бути динамічним і розуміти шаблони.

Це був CS50... тобто, наш урок. До зустрічі! 👋

← До списку уроків Наступний урок →