React Router

Что это простыми словами

React Router — это навигатор внутри приложения, который переключает страницы без перезагрузки браузера.

Аналогия: обычный сайт работает как книга — чтобы перейти на другую страницу, браузер загружает её заново целиком, как будто вы перелистываете страницу. React Router работает как интерактивная презентация: когда вы нажимаете на ссылку, меняется только нужная часть экрана, а остальное остаётся на месте. Адрес в браузере обновляется, но сама страница не мигает и не грузится заново.

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

Официальное определение

Теперь, когда суть понятна, вот как React Router описывают в вакансиях и документации. Эту формулировку вы встретите у заказчика и в резюме — и теперь будете понимать, что за ней стоит.

«React Router — декларативная библиотека для клиентского роутинга в одностраничных React-приложениях».

Разберём по словам. «Декларативная» значит, что разработчик описывает, какие страницы должны быть и какой адрес к какой странице ведёт, а библиотека сама разбирается, как это сделать. «Клиентский роутинг» — навигация происходит в браузере, без обращения к серверу за новой страницей. «Одностраничное приложение» (SPA) — технически это одна HTML-страница, которая меняет своё содержимое, создавая иллюзию перехода между страницами.

Какую задачу решает

React сам по себе умеет только показывать и обновлять содержимое страницы. Он не знает, как делать навигацию: переходить с главной на страницу товара, возвращаться назад кнопкой браузера, показывать правильный адрес в строке.

React Router добавляет эту возможность. Он следит за адресом в браузере и показывает нужный компонент, когда адрес меняется. При этом браузер не перезагружает страницу — всё происходит мгновенно, данные и состояние приложения сохраняются.

Побочная польза: адрес в браузере остаётся рабочим — его можно скопировать, отправить другу или сохранить в закладки, и он откроет ровно ту страницу, которая нужна.

К какой экосистеме относится

• Язык — JavaScript (часто вместе с TypeScript).

• Фреймворк — только React. Это библиотека строго для React, в других фреймворках она не работает.

• Специальность — frontend-разработчик.

React Router — одна из самых распространённых библиотек в экосистеме React. Если проект на React имеет несколько страниц, скорее всего там используется React Router или один из его аналогов.

Чем заменяется

Главный современный аналог — TanStack Router. Он решает ту же задачу: навигация внутри React-приложения без перезагрузки страницы. В одном проекте обычно используют что-то одно.

Главное: переход между ними дешёвый. Разработчик, который работал с React Router, разберётся в TanStack Router за несколько дней — идея одна, меняется только способ описания маршрутов.

Отдельный случай — Next.js. Это не библиотека роутинга, а полноценный фреймворк поверх React, где роутинг уже встроен. Если проект написан на Next.js, React Router там не нужен — роутинг работает по-другому, через файловую структуру.

Что не путать

• React Router ≠ React. React — это сам фреймворк для интерфейса, React Router — лишь одна из библиотек рядом с ним. Приложение на React может работать и без React Router, если оно не требует навигации между страницами.

• React Router ≠ Next.js. Next.js — это целый фреймворк со своим встроенным роутингом, а React Router — библиотека только для навигации. Это не взаимозаменяемые вещи: Next.js заменяет React целиком, включая роутинг.

• React Router ≠ серверный роутинг. Серверный роутинг — это когда сервер решает, какую страницу отдать по адресу. React Router работает в браузере, сервер отдаёт одну и ту же страницу, а дальше уже браузер разбирается, что показать.

• React Router ≠ Redux. Redux управляет данными внутри приложения, React Router — навигацией между страницами. Это две разные задачи, и они часто используются вместе в одном проекте.

Насколько это важно при отборе

Короткий ответ: обычно это НЕ повод отбраковывать кандидата.

Самая частая ошибка — отсеивать сильного React-разработчика только потому, что у него в резюме указан TanStack Router, а в вакансии написано React Router. Переход между библиотеками роутинга занимает несколько дней, потому что задача одна и та же.

Правильный подход: смотрите, есть ли у кандидата опыт с каким-либо решением для навигации в React. Если есть — этого достаточно. Если в вакансии жёстко написано «только React Router», уточните у нанимающего менеджера, действительно ли это критично: часто оказывается, что нет.

Когда всё же стоит обратить внимание: если у кандидата вообще нет опыта с многостраничными приложениями и роутингом, а вакансия предполагает сложный интерфейс с навигацией — это повод уточнить, работал ли он с подобными задачами.

Отдельный случай: если кандидат работал только с Next.js, он может не знать React Router — там роутинг устроен принципиально по-другому. Но это не минус: опыт с Next.js показывает, что человек работал со сложными проектами, а React Router при необходимости освоит.

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