Глава 20. Маршрутизация в React через React Router
Зачем эта глава
В React-приложениях часто нужно несколько страниц без перезагрузки. Для этого используют React Router.
Теория (коротко)
React Router создаёт маршруты и позволяет переключать страницы внутри SPA.
Главные элементы: BrowserRouter, Routes, Route, Link.
<BrowserRouter>
<nav>
<Link to="/">Главная</Link>
<Link to="/about">О нас</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
Важно: маршрутизацию лучше подключать после того, как компоненты уже готовы.
Задания
Задание: маршруты
- Добавь две страницы: Home и About.
- Сделай навигацию через Link.
- Проверь, что URL меняется без перезагрузки.
Проверка себя
Ты понимаешь, как организовать навигацию в SPA.
Мини-проект
Цель: мини-сайт на 3 страницы.
Требования: главная, каталог, контакты.
Критерий готовности: переходы работают, страницы разделены.
Словарь главы
- SPA
- Одностраничное приложение с динамической навигацией.
- Route
- Маршрут, который отвечает за конкретную страницу.