Если вы переходите с одностраничных приложений или просто хотите масштабировать проект, React с роутером даст гибкость. Мы пройдем от установки до развертывания, с примерами кода и сравнениями подходов. Получится SEO-дружественный сайт, готовый к продакшену.

Подготовка проекта: с чего начать разработку

Создание многостраничного сайта на React начинается с правильной инициализации проекта. Обычно используют Create React App - это инструмент, который генерирует готовую структуру с Webpack, Babel и всем необходимым. Без него пришлось бы настраивать сборщик вручную, что занимает часы. Например, команда npx create-react-app my-multipage-site создаст папки src, public и package.json за минуты.

После создания проекта важно очистить его от лишнего: удалить логотипы, тестовые компоненты вроде App.test.js и logo.svg. Это упростит старт. Далее планируем структуру: главная страница, about, контакты, проекты. Представьте, что каждая страница - отдельный компонент с общими элементами вроде navbar и footer. Такой подход делает код модульным и легким в поддержке.

Вот базовые шаги для старта:

• Запустите npx create-react-app my-site в терминале.
• Перейдите в папку проекта: cd my-site.
• Запустите сервер разработки: npm start - сайт откроется на localhost:3000.
• Очистите src/App.js и добавьте простую разметку для проверки.

Настройка навигации: React Router в действии

React Router - стандартный инструмент для многостраничности в React. Он позволяет менять URL без полной перезагрузки страницы, что идеально для SPA. Без роутера пришлось бы вручную менять компоненты через состояние, но это неудобно для больших сайтов. Установите его командой npm install react-router-dom и импортируйте в App.js.

Оберните приложение в <BrowserRouter>, создайте маршруты с <Routes> и <Route>. Например, главная на ‘/’, проекты на ‘/projects’. Для активных ссылок используйте <NavLink> - он добавит класс active автоматически. Не забудьте настроить basename, если сайт не в корне домена. Это решит проблемы с относительными путями.

Ключевые элементы роутера:

• BrowserRouter: Обертка для всего приложения.
• Routes: Контейнер для маршрутов.
• Route path=“/” element={}: Связывает URL с компонентом.
• NavLink to=“/about”: Ссылка с авто-выделением.
• useNavigate(): Хук для программной навигации.

Пример кода в App.js:

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <NavLink to="/">Главная</NavLink>
        <NavLink to="/projects">Проекты</NavLink>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/projects" element={<Projects />} />
      </Routes>
    </BrowserRouter>
  );
}

Создание компонентов и общих элементов

В многостраничном сайте ключ - переиспользование: navbar, footer, header. Создайте их как отдельные компоненты в папке components. Navbar будет содержать NavLink’и, footer - контакты и копирайт. Главная страница соберет все вместе. Это ускорит разработку: меняете navbar - обновляется везде.

Для страниц вроде /projects добавьте динамику: список карточек с useEffect для загрузки данных. Если backend есть, подключите API через fetch или axios. Без бэкенда используйте статические JSON. Sticky footer фиксируется внизу экрана через CSS flexbox. Компоненты должны быть функциональными с хуками для простоты.

Структура компонентов:

• Navbar: Ссылки и логотип.
• Footer: Контакты, соцсети.
• Home: Контент главной.
• Projects: Список с деталями.
• SingleProject: Динамическая страница /projects/:id с useParams.

Пример sticky footer:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}
footer {
  flex-shrink: 0;
}

Оптимизация и развертывание сайта

После сборки оптимизируйте: lazy loading с React.lazy для тяжелых страниц, memo для компонентов. Соберите продакшен npm run build - получилась папка build с оптимизированными файлами. Разверните на Netlify, Vercel или GitHub Pages бесплатно. Для серверов настройте rewrite правил, чтобы роутер работал.

Gatsby - альтернатива для статических сайтов: генерирует HTML заранее, идеально для блогов. Но для динамики лучше чистый React. Тестируйте на мобильных - используйте responsive дизайн с CSS Grid.

Масштабирование за пределами базового роутера

Многостраничный сайт на React легко растет: добавьте аутентификацию с Context API, state management через Redux или Zustand. Для производительности внедрите Suspense и ErrorBoundary. Осталось пространство для TypeScript - добавьте типы для props и state, чтобы код стал надежнее. Или мигрируйте на Next.js для SSR и лучшего SEO без боли.