Цель работы

Научиться настраивать навигацию между страницами с использованием React Router.

Теоретическая часть

Роутинг — это механизм навигации между разными страницами в одностраничном приложении (SPA). Основные понятия:

React Router — наиболее популярная библиотека для роутинга в React-приложениях
Маршрут (Route) — соответствие между URL и компонентом, который должен отображаться
Навигация — переход между маршрутами с помощью компонентов Link или программно

Основные компоненты React Router v6:

BrowserRouter — оборачивает приложение и предоставляет контекст роутера
Routes — контейнер для определения маршрутов
Route — определяет соответствие между путем и компонентом
Link — компонент для создания навигационных ссылок
useNavigate — хук для программной навигации

Преимущества React Router:

Поддержка динамических маршрутов
Возможность вложенных маршрутов
Интеграция с React-состоянием
Поддержка навигации без перезагрузки страницы

В этой лабораторной работе мы настроим роутинг для навигации между страницами: Главная → Курсы → Запись.

Задание

Настроить навигацию между страницами: Главная, Курсы и Запись на урок с использованием React Router.

Пошаговая инструкция

Установите React Router

Откройте терминал в папке проекта и выполните команду:

npm install react-router-dom

Эта команда установит React Router и его зависимости в ваш проект.

Оберните приложение в BrowserRouter

Откройте файл src/main.jsx или src/index.js и оберните приложение в BrowserRouter:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
);

Настройте маршруты в App.js

Откройте файл src/App.js и добавьте импорты:

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Courses from './pages/Courses';
import Enroll from './pages/Enroll';

Затем замените содержимое компонента App на:

function App() {
  return (
    
        } />
        } />
        } />
        Страница не найдена} />
      
  );
}

Обновите навигационное меню

Откройте файл src/components/Navigation.js и замените обычные теги a на компонент Link:

import React from 'react'; import { Link } from 'react-router-dom'; function Navigation() { return ( ); } export default Navigation;

Создайте страницу 404

Для обработки несуществующих маршрутов создайте страницу 404:

# В терминале
touch src/pages/NotFound.js

Добавьте следующий код:

import React from 'react'; function NotFound() { return (

404

Страница не найдена

Извините, запрашиваемая страница не существует.

Вернуться на главную

); } export default NotFound;

Затем обновите маршрут в App.js:

} />

Добавьте программную навигацию

В компоненте EnrollmentForm добавьте программную навигацию после успешной отправки формы:

import { useNavigate } from 'react-router-dom';

function EnrollmentForm() {
  const navigate = useNavigate();
  
  const handleFormSubmit = () => {
    if (validate()) {
      console.log('Форма валидна', formData);
      setIsSubmitted(true);
      
      // Перенаправляем на главную страницу через 3 секунды
      setTimeout(() => {
        navigate('/');
      }, 3000);
    }
  };
  
  // Остальной код компонента...
}

Проверьте результат

Запустите проект и проверьте навигацию между страницами:

Перейдите по разным ссылкам в меню
Убедитесь, что URL в адресной строке изменяется
Попробуйте ввести несуществующий URL (например, /about)
Проверьте программную навигацию после отправки формы

Если навигация работает без перезагрузки страницы и все маршруты корректно отображаются, значит, роутинг настроен верно.

Критерий	Баллы
Установлен React Router	2
Настроены маршруты	3
Работает навигация	3
Обработка 404	2
Итого	10

Связь с демонстрационным экзаменом

Эта лабораторная работа связана с профессиональной компетенцией:

ПК: Создавать структуру кода веб-страницы информационных ресурсов в соответствии с дизайн-макетом

На демонстрационном экзамене вам потребуется реализовать многостраничное приложение с навигацией между страницами, что является важной частью структуры веб-приложения.

Согласно документу КОД 09.02.09-1-2025, на экзамене оценивается:

Навык разработки программного кода веб-страниц информационного ресурса
Умение применять специализированное программное обеспечение для верстки страниц информационных ресурсов

Лабораторная работа №12: Роутинг с React Router

Цель работы

Теоретическая часть

Задание

Пошаговая инструкция

404

Страница не найдена

Критерии оценки

Связь с демонстрационным экзаменом