В чем принцип работы React Router?

React Router — клиентский роутер: он синхронизирует UI с URL без перезагрузки страницы, используя History API браузера и условный рендеринг компонентов.

Принцип работы по шагам

Перехват навигации. Клик по <Link> не делает запрос на сервер: preventDefault + history.pushState() меняют URL в адресной строке без перезагрузки.

Отслеживание URL. Роутер подписан на изменения истории (pushState/replaceState/popstate — кнопки назад/вперёд) и хранит текущий location в своём состоянии (через контекст).

Сопоставление маршрутов. При изменении location роутер сравнивает pathname с деревом маршрутов (учитывая динамические сегменты :id, вложенность, ранжирование специфичности) и решает, что рендерить.

Рендеринг. Подходящие компоненты рендерятся; вложенные маршруты — через <Outlet /> в родительском layout'е.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Layout />}>          {/* layout с <Outlet /> */}
      <Route index element={<Home />} />
      <Route path="users/:id" element={<User />} /> {/* useParams().id */}
    </Route>
  </Routes>
</BrowserRouter>

Инструменты доступа

Хуки: useParams (параметры пути), useNavigate (программная навигация), useLocation, useSearchParams. В v6.4+ добавлены loaders/actions — загрузка данных на уровне маршрута до рендера.

Следствия

• Сервер должен отдавать index.html на любой путь (fallback), иначе прямой заход на /users/5 даст 404: маршрутизация живёт в браузере.
• Состояние приложения при навигации сохраняется (SPA) — в отличие от полной перезагрузки при классических переходах.

Коротко для собеседования

React Router перехватывает переходы (pushState вместо запроса к серверу), слушает изменения URL, сопоставляет путь с деревом маршрутов и рендерит нужные компоненты (вложенность через Outlet, параметры через useParams). SPA-следствие: серверу нужен fallback на index.html.