Сравни способы роутинга на React и объясни, когда выбирать каждый вариант.

Роутинг в React-приложении можно получить четырьмя путями; выбор зависит от типа приложения и потребности в SSR.

React Router (клиентский SPA-роутинг)

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/users/:id" element={<User />} />
</Routes>

• Де-факто стандарт SPA: декларативные маршруты, вложенные layout'ы (Outlet), useParams/useNavigate, лоадеры данных в v6.4+.
• Выбирать: классическое SPA без SSR — админки, дашборды, внутренние инструменты.

Файловый роутинг фреймворков (Next.js App Router, Remix)

Маршрут = файл в файловой системе (app/users/[id]/page.tsx).

• Из коробки: SSR/SSG, серверные компоненты, code splitting по маршрутам, вложенные layout'ы, загрузка данных на сервере.
• Выбирать: публичные сайты и продукты, где важны SEO и скорость первой загрузки; сегодня — рекомендация React-документации по умолчанию.

TanStack Router

• Полностью типобезопасный клиентский роутер: параметры и search-параметры проверяются TypeScript'ом; встроенная интеграция с кешированием данных.
• Выбирать: сложные SPA на TypeScript, где важна типизация URL-состояния (фильтры, пагинация в query string).

Самописный роутинг

Слушать popstate/hash, рендерить по window.location.

• Выбирать: почти никогда; разве что микро-виджет, где зависимость от роутера избыточна.

Критерии выбора

• Нужен SSR/SEO → Next.js/Remix (файловый).
• Чистое SPA → React Router (стандарт) или TanStack Router (максимум типизации).
• Учебная цель или экстремально маленький бандл → руками.

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

Основные варианты: React Router — стандарт клиентских SPA; файловый роутинг Next.js/Remix — когда нужны SSR, SEO и серверные компоненты; TanStack Router — типобезопасность URL в больших TS-проектах. Критерий выбора — тип приложения: публичный сайт → фреймворк, внутренний инструмент → клиентский роутер.