Какие знаешь способы роутинга на React?

Способы роутинга на React

Роутинг — один из краеугольных камней современной веб-разработки. Расскажу о всех основных подходах.

1. React Router v6 (Классический выбор)

Мост между компонентами и URL-адресами:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users/123">User</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<User />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

function User() {
  const { id } = useParams();
  return <h1>User {id}</h1>;
}

Плюсы: популярна, большое сообщество, много расширений Минусы: bundle size, требует оборачивания провайдером

2. Next.js App Router (Современный стандарт)

Файловая система как роутинг:

src/app/
  page.tsx          → /
  about/page.tsx    → /about
  users/[id]/page.tsx → /users/123

// src/app/users/[id]/page.tsx
export default function UserPage({ params }: { params: { id: string } }) {
  return <h1>User {params.id}</h1>;
}

// Навигация
import Link from 'next/link';
<Link href="/users/123">Go to user</Link>

Плюсы: встроенный, SSR по умолчанию, отличная производительность Минусы: только для Next.js

3. TanStack Router (Новое поколение)

Типобезопасный роутер нового уровня:

import { RootRoute, Route, Router } from '@tanstack/react-router';

const rootRoute = new RootRoute({
  component: () => (
    <>
      <Link to="/">Home</Link>
      <Link to="/users/$id" params={{ id: '123' }}>User 123</Link>
      <Outlet />
    </>
  ),
});

const usersRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/users/$id',
  component: () => {
    const { id } = usersRoute.useParams();
    return <h1>User {id}</h1>;
  },
});

Плюсы: типизация, производительность, поддержка loaders Минусы: экосистема еще растет

4. Wouter (Легковес)

Минималистичный роутер:

import { Router, Route, Link } from 'wouter';

function App() {
  return (
    <Router>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Route path="/about" component={About} />
      <Route path="/users/:id" component={UserPage} />
    </Router>
  );
}

function UserPage({ params }) {
  return <h1>User {params.id}</h1>;
}

Плюсы: маленький размер (1.3kb), простота Минусы: меньше функционала

5. Hash Routing (Legacy)

Для одностраничных приложений без сервера:

<HashRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</HashRouter>

Результат: example.com/#/about

Плюсы: работает без сервера Минусы: ужасно для SEO, для старых браузеров

6. Vike (SSR фреймворк)

Для Vite проектов с SSR:

// pages/index.page.tsx
export default function HomePage() {
  return <h1>Home</h1>;
}

// pages/users/[id].page.tsx
export default function UserPage() {
  const { id } = usePageContext().routeParams;
  return <h1>User {id}</h1>;
}

Сравнение подходов

Рекомендация

• Сайт: Next.js App Router (стандарт 2025)
• SPA: TanStack Router (лучшее будущее) или React Router (проверенная)
• Мини-проект: Wouter
• Vite+SSR: Vike

Критерий выбора: нужна ли типизация роутов и SSR? Если да → Next.js.