Маршрутизация в React без библиотек. Как реализовать переходы между страницами

✏️ Реализуем маршрутизацию в React без сторонних библиотек. Поговорим, зачем вообще нужна маршрутизация, и как работает роутинг в SPA. Создадим базовый компонент Router, который будет отслеживать URL-адрес и отображать соответствующую страницу. Разделим приложение на TasksPage (список задач) и TaskPage (отдельная задача), подключим их через Router, и научимся переходить между ними без перезагрузки. Сделаем компонент RouterLink, чтобы заменить обычные ссылки и перехватывать клики. Добавим поддержку динамических маршрутов с параметрами (/tasks/:id): сначала по-простому, потом покажу «взрослую» реализацию с шаблонами. Всё — на чистом React, без react-router. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:44 | Зачем нужна маршрутизация ▶ 01:50 | Создаём простую архитектуру роутинга ▶ 06:40 | Создаём страницы ▶ 08:50 | Добавляем роутинг в App.jsx ▶ 10:35 | Проверка работы базового роутинга ▶ 11:17 | Доработка TasksPage ▶ 12:12 | Доработка TaskPage ▶ 19:26 | Доработка TodoItem ▶ 22:12 | Компонент RouterLink ▶ 26:25 | Динамические маршруты ▶ 30:05 | Бонус: правильная реализация динамических маршрутов ▶ 36:28 | Заключение 📚 Ссылки из видео: 🧑💻 Основной телеграм-канал: 💬 Коммьюнити-чат в телеграме (помощь новичкам): 🗂️ Бесплатные курсы на канале: 📌 Автор: #reactjs