SPRINT 03 . Роутинг. Создание SPA и многостраничных сайтов

Матеріали

Текст

Вопросы в видеоуроке

00:00 Обновление react-router-dom 6
01:00 Установка 5 версии react-router-dom
04:15 Установка 6 версии RRD (Switch is not exported from)
07:00 Обновляем Switch - Route, component - element
09:40 Страница 404
10:30 useLocation вместо useRouteMatch
12:40 SPA в React, Link
17:10 Активная навигация в React, NavLink

TASKS

task 1

Создайте приложение unit_03_mpa и зайдите в папку приложения.

task 2

Установите react-router-dom с помощью команды npm i react-router-dom.

task 3

Создайте компоненты Header.js, Home.js, About.js, Category.js, Footer.js. Они размещаются в папке src. Их логика и содержимое показаны на unit_03_01.png в шаблоне. Импортируйте данные компоненты.

Компонент Header содержит тег nav, в котором создана следующая верстка:


<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О сайте</a></li>
<li><a href="/cat">Категории</a></li>
</ul>

task 4