Этап 7 из 12 · ≈ 4 ч

Маршрутизация

Основа с Junior

Несколько страниц в одностраничном приложении — React Router, вложенные маршруты, загрузка данных.

Одностраничное приложение (SPA) меняет адрес через History API без перезагрузки страницы, а маршрутизатор решает, какой компонент показать.

Что важно знать

  • Маршруты, параметры (/orders/:id), вложенные маршруты с общим каркасом, страница 404.
  • Навигация ссылками (<Link>), а не onClick с переходом — иначе ломаются открытие в новой вкладке и доступность.
  • Защищённые маршруты: проверка авторизации и перенаправление на вход.
  • Загрузка данных до показа страницы (loaders) убирает «водопад» запросов из эффектов.
  • Разделение кода по маршрутам: lazy(() => import("./Orders")).
  • Состояние фильтров и пагинации — в параметрах адреса: ссылкой можно поделиться, кнопка «назад» работает.
  • В Next.js маршруты задаются структурой файлов.

Критерии освоения

Junior ≈ 4 ч

  • Настраивает маршруты, параметры и вложенные раскладки в React Router

Практика. Сделать приложение из 4 страниц с вложенной раскладкой и страницей 404.

Middle ≈ 4 ч

  • Загружает данные до показа страницы, защищает маршруты и хранит фильтры в URL

Практика. Добавить загрузчики данных, защищённые маршруты и фильтры каталога в параметрах адреса.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как настроить маршруты и вложенные раскладки в React Router?Junior

Маршруты описывают деревом: путь → компонент. Вложенные маршруты рендерятся внутри родителя на месте &lt;Outlet/&gt; — так общая раскладка (шапка, меню) остаётся, а меняется содержимое. Переход без перезагрузки — &lt;Link to&gt; или useNavigate(); обычный…

Полный разбор
Как читать параметры пути и строки запроса в React Router?Junior

Параметры пути (/orders/:id) читают useParams() — const { id } = useParams(). Параметры строки запроса (?page=2&sort=date) — useSearchParams(): чтение params.get("page") и запись setParams({page: "3"}) меняет URL и перерисовывает компонент. Все значения …

Полный разбор
Как загружать данные до показа страницы в React Router?Middle

loader маршрута — функция, которую роутер вызывает при переходе, параллельно для всех вложенных маршрутов, до рендера страницы; компонент читает результат через useLoaderData(). Так нет «водопада» запросов из вложенных эффектов и мигания пустых состояний…

Полный разбор
Какое состояние стоит хранить в URL и как защищать маршруты?Middle

В URL хранят то, что должно переживать перезагрузку, делиться ссылкой и работать с кнопкой «назад»: фильтры, сортировку, страницу, открытую вкладку, поисковый запрос. URL становится источником истины — компонент читает параметры, а меняет их через навигацию…

Полный разбор
Что такое JSX и как вставлять в него выражения и фрагменты?Junior

JSX — синтаксис, который компилируется в вызовы создания элементов (<div className="a"> → jsx("div", {className: "a"})). В фигурных скобках — любое выражение JavaScript: переменная, вызов функции, тернарный оператор, map по массиву; инструкции (if, for) …

Полный разбор
Чем state отличается от props в React?Junior

props — входные данные от родителя, компонент их только читает. state — собственные данные компонента, меняются через setState и вызывают перерисовку. Данные текут сверху вниз; ребёнок сообщает об изменениях родителю через колбэки в props. Общее состояние…

Полный разбор
Как сделать условный рендеринг в React и в чём ловушка с && и нулём?Junior

Способы: тернарный оператор {cond ? <A/> : <B/>}, логическое И {cond && <A/>}, ранний return из компонента, переменная с элементом. Ловушка &&: если слева число 0, React его выведет на страницу ({items.length && <List/>} покажет «0»). Лечится явным булевым…

Полный разбор
Как создать React-проект и почему React перерисовывает интерфейс при изменении состояния?Junior

Проект создают сборщиком Vite: npm create vite@latest app -- --template react-ts, затем npm install и npm run dev. React декларативный: вы описываете, как интерфейс выглядит при данном состоянии, а не какие DOM-операции выполнить. Когда состояние меняется…

Полный разбор

Документация

← Вся карта «React»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования