Изучите React Router v6 – Полный курс

• Курс охватывает маршрутизацию с помощью React Router.  

• Включает настройку базовых маршрутов, защиту аутентифицированных маршрутов и пользовательские переходы.  

• Используются анимированные визуальные эффекты и реальные приложения.  

• Рассматриваются проблемы маршрутизации, передача параметров URL и реализация вложенных маршрутов.  

• Передовые методы: отложенная загрузка, переходы маршрутов и защита маршрутов.  

• React Router - мощная библиотека для маршрутизации в приложениях React.  

• Обеспечивает декларативный подход к маршрутизации.  

• Позволяет создавать одностраничные приложения с несколькими представлениями.  

• Основные цели: плавная навигация и единообразный пользовательский опыт.  

• Декларативная маршрутизация упрощает понимание и поддержку логики маршрутизации.  

• Вложенная маршрутизация поддерживает сложные структуры приложений.  

• Динамическая маршрутизация позволяет управлять параметрами в URL.  

• Программная навигация позволяет программно перемещаться по маршрутам.  

• Разделение кода и отложенная загрузка оптимизируют время начальной загрузки.  

• Проект представляет собой сайт GitHub Explorer.  

• Включает домашнюю страницу с репозиториями и страницу сведений о репозитории.  

• Страница пользователей и страница поиска пользователей.  

• Страница профиля требует аутентификации для доступа.  

• Установка последней версии Node.js.  

• Создание приложения React с помощью npx create-react-app.  

• Открытие проекта в редакторе кода VS Code.  

• Запуск проекта и установка React Router с помощью npm install react-router-dom.  

• Обертывание всего приложения в компонент Browser Router.  

• Использование HTML5 History API для синхронизации пользовательского интерфейса с URL.  

• Импорт Browser Router и обертывание всех компонентов в приложении.  

• Проверка работы приложения в браузере.  

• Обнаружена ошибка импорта, пропущенная буква "т" в слове "react".  

• После исправления ошибки, маршрутизатор работает нормально.  

• Рекомендуется использовать браузер-маршрутизатор в файле index.js.  

• Импортируем браузер-маршрутизатор в файл index.js.  

• Используем компонент приложения внутри браузера-маршрутизатора.  

• Удаляем компонент браузера-маршрутизатора из файла app.js.  

• Компонент route используется для определения маршрута и компонента для отображения.  

• Необходимы реквизиты path и element.  

• Пример использования компонента route для отображения домашней страницы.  

• Создаем компонент "О нас" для отображения на другой странице.  

• Используем компоненты маршрутизатора из react-router-dom для отображения компонентов на основе URL-пути.  

• Импортируем компонент route из react-router-dom.  

• Определяем маршрут для домашней страницы с реквизитами path и element.  

• Добавляем точное ключевое слово для корректного отображения в корне проекта.  

• Тестируем маршрут в браузере, получаем ошибку.  

• Компонент route должен быть обернут в компонент route.  

• Исправляем ошибку, добавляя компонент route в код.  

• Копируем и вставляем домашний маршрут, изменяем путь и элемент.  

• Добавляем новый путь для страницы "О нас".  

• Тестируем новый маршрут в браузере, компонент отображается корректно.  

• Клонируйте репозиторий, чтобы получить весь необходимый код.  

• Скопируйте ссылку на репозиторий и запустите git clone.  

• В папке с исходным кодом будут все компоненты и шаблонный код для работы с React Router.  

• Скопируйте и измените маршрут "домой" и "о нас" для создания маршрута "пользователи".  

• Проверьте, что маршрут работает, перейдя по URL.  

• На следующем уроке научимся перемещаться между страницами.  

• Импортируйте компонент Link из React Router Dom.  

• Используйте компонент Link для перехода между страницами без перезагрузки приложения.  

• Укажите URL-путь для перехода в компоненте Link.  

• HTML-тег привязки перезагружает все приложение при переходе.  

• React Router Link изменяет отображаемый компонент без перезагрузки состояния.  

• Встройте навигационную панель в маршрут для отображения на всех страницах.  

• Используйте компонент Outlet для отображения дочерних компонентов под навигационной панелью.  

• Измените тег привязки на тег Link для навигации без перезагрузки приложения.  

• Укажите путь для перехода в компоненте Link.  

• Создайте маршрут по умолчанию для отображения при переходе на неподходящий URL.  

• Экспортируйте и верните div с текстом "Страница не найдена".  

• Тег link позволяет вернуться на главную страницу.  

• Импортируем компонент ссылки из react-router-dom.  

• Экспортируем компонент и используем его в приложении.  

• Импортируем не найденный компонент.  

• Создаем отдельный маршрут для отображения не найденного компонента.  

• Устанавливаем параметр path prop на символ дикой карты.  

• Проверяем работу не найденного компонента в браузере.  

• Компонент отображается при переходе на несуществующие маршруты.  

• Компонент корректно отображается при переходе на главную страницу и страницу пользователя.  

• Параметры маршрута позволяют динамически изменять сегменты URL.  

• Пример использования: профили пользователей и страницы записей в блоге.  

• Импортируем профиль пользователя и создаем маршрут для него.  

• Добавляем параметры URL для передачи данных.  

• Используем функцию useParams для получения параметров.  

• Проверяем работу параметров в компоненте профиля пользователя.  

• Добавляем параметры в URL и получаем их значение в компоненте.  

• Проверяем работу параметров при переходе на страницу профиля пользователя.  

• Используем параметры для динамического отображения профиля пользователя.  

• Программная навигация позволяет перемещаться между маршрутами с помощью кода.  

• Создаем новый маршрут для поиска и импортируем пользовательский компонент.  

• Используем функцию навигации пользователя для программного перехода между страницами.  

• Заменяем компонент ссылок на HTML-тег кнопки.  

• Импортируем пользовательский навигатор и инициализируем его в переменную.  

• Используем хук внутри обработчика onclick для навигации по страницам.  

• Объявляем функцию стрелки для навигации по URL.  

• Проверяем работу навигации в браузере.  

• Перенаправление пользователя на страницу профиля на основе логики приложения.  

• Импортируем пользовательский навигационный хук.  

• Проверяем существование пользователя и перенаправляем на страницу профиля.  

• Отображаем сообщение об ошибке, если пользователь не существует.  

• Проверяем работу перенаправления в браузере.  

• Используем функцию тайм-аута для перенаправления на домашнюю страницу через несколько секунд.  

• Добавляем переменную "перейти" в качестве зависимости от useEffect.  

• Охрана маршрутов позволяет контролировать доступ к маршрутам на основе условий.  

• Пример использования: защита страниц с конфиденциальными данными.  

• Создаем индивидуальные маршруты для страниц входа и профиля аутентификации.  

• Устанавливаем первый элемент в компоненте входа в систему.  

• Изменяем компонент на профиль аутентификации.  

• Импортируем необходимые компоненты и изменяем путь к профилю.  

• Создаем переменные состояния username и islogged.  

• Устанавливаем значения для username и islogged.  

• Передаем реквизиты set is logged и set username.  

• Добавляем параметр username prop в профиль аутентификации.  

• Проверяем, что имя пользователя и пароль введены правильно.  

• Убеждаемся, что пользователь попадает на страницу авторизации.  

• Используем компонент navigate для перенаправления на страницу входа.  

• Проверяем, зарегистрирован ли пользователь, и перенаправляем на страницу входа, если нет.  

• Проверяем, что пользователь перенаправляется на страницу входа при неудачной аутентификации.  

• Убеждаемся, что пользователь перенаправляется на страницу профиля после успешной аутентификации.  

• Добавляем ссылки для поиска, профиля и входа.  

• Проверяем, что ссылка для входа отображается только при отсутствии аутентификации.  

• Проверяем, что ссылка для входа исчезает после успешной аутентификации.  

• Добавляем опцию is logged в компонент navv для корректного отображения ссылок.  

• Подводим итоги урока.  

• Обещаем перейти к более сложным темам в следующем разделе.  

• Использование анимации в React Router для улучшения взаимодействия с пользователем.  

• Установка React Transition Group через npm.  

• Запуск проекта после установки.  

• Импорт компонентов switch transition и css transition.  

• Определение компонентов для анимации переходов.  

• Определение анимации затухания в CSS.  

• Настройка непрозрачности и переходных групп.  

• Определение анимации для начала, во время и завершения перехода.  

• Присвоение имени класса fade компоненту transition.  

• Добавление процедуры тайм-аута для отключения анимации.  

• Использование useLocation из React Router для отслеживания перемещений.  

• Добавление опоры для компонента в switch transition.  

• Тестирование анимации в браузере.  

• Решение проблемы с вложенными маршрутами.  

• Добавление навигационного компонента поверх всех маршрутов.  

• Удаление навигационного маршрута.  

• Тестирование анимации на всех страницах.  

• Подведение итогов урока.  

• Важность практики для понимания концепций.  

• Обещание новых проектов в последующих частях курса.  

• Отложенная загрузка позволяет загружать части приложения по требованию для сокращения времени начальной загрузки.  

• В React Router можно реализовать отложенную загрузку, заменив импорт компонентов на динамический импорт с помощью функции react lazy.  

• Определяем маршруты и компоненты, которые не требуются сразу после загрузки приложения.  

• Заменяем импорт компонентов на динамический с помощью react lazy.  

• Пример с пользовательским компонентом: используем функцию lazy hook для импорта компонента.  

• Применяем lazy к другим компонентам, кроме компонента домашней страницы.  

• Удаляем прямой импорт компонентов, которые загружаются лениво.  

• Пример с компонентами профиля пользователя, поиска, входа и другими.  

• Удаляем ненужные вводы и компоненты, которые загружаются лениво.  

• Ленивая загрузка компонентов улучшает производительность приложения.  

• Компонент suspense помогает отображать резервный компонент во время загрузки отложенного компонента.  

• Компонент suspense позволяет отображать резервный компонент во время загрузки отложенного компонента.  

• Пример использования: отображение загрузки или другого компонента до завершения загрузки отложенного компонента.  

• В небольших приложениях загрузка может быть незаметной, но в сложных приложениях это значительно улучшает производительность.  

• Создание конфигурационного файла для управления маршрутами.  

• Определение массива объектов маршрута с путем, компонентом и другими свойствами.  

• Динамическое отображение маршрутов через сопоставление массива.  

• Создание файла маршрутов в исходной папке.  

• Экспорт const appRoutes как списка объектов маршрута.  

• Импорт всех необходимых компонентов в файл маршрутов.  

• Определение пути и компонента для каждого маршрута.  

• Добавление свойства requiresAuth для защиты маршрутов.  

• Пример определения маршрута для домашней страницы и профиля пользователя.  

• Импорт маршрутов в файл приложения.  

• Использование функции map для отображения всех маршрутов.  

• Проверка необходимости аутентификации для каждого маршрута.  

• Обработка ошибок при передаче реквизитов между компонентами.  

• Передача реквизитов setLoggedIn и userName в компонент маршрута.  

• Проверка работы входа в систему и исправление ошибок в маршрутах.  

• Ошибка в пути к профилю приложения, а не авторизации.  

• Изменение пути на профиль авторизации.  

• Проверка работы входа в систему и перенаправления на страницу входа.  

• Обновление кода для надежности и удобства добавления новых маршрутов.  

• Объявление о завершении курса после еще одного урока.  

• Анонс нового проекта на YouTube для тех, кто хочет продолжить изучение React Router.  

• Призыв подписаться на канал для новых курсов.  

• Проверка работы кнопок для перехода на страницы сведений о пользователе и подробного отчета.  

• Преобразование кнопок в ссылки для навигации.  

• Создание маршрута для страницы подробного отчета и добавление параметров.  

• Тестирование работы ссылок и кнопок.  

• Подведение итогов курса и важность закрепления знаний через собственные проекты.  

• Обещание помощи в будущем и благодарность за просмотр.  

• Анонс следующего проекта с нуля для закрепления концепций React Router.