Как реализовать поддержку динамического base path в React-приложении?

Поддержка динамического base path необходима, когда ваше React-приложение развертывается не в корне домена (например, https://example.com), а в поддиректории (например, https://example.com/my-app/). Это часто встречается в микросервисных архитектурах, где несколько приложений живут на одном домене, или на shared хостингах. Без правильной настройки приложение будет искать ресурсы и маршруты по неправильным путям, что приведет к ошибкам 404 и сломанной навигации.

Настройка React Router

Основной инструмент для управления путями в React — это роутер. В React Router (v6) вы можете задать базовый путь с помощью пропса basename в компоненте <BrowserRouter> или <Router>. Значение должно быть строкой, соответствующей поддиректории, где живет ваше приложение. Чтобы сделать его динамическим, можно прочитать значение из переменной окружения или конфигурационного файла, загружаемого во время сборки или выполнения.

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

// Значение base path можно получить из переменной окружения или конфига.
const BASE_PATH = process.env.REACT_APP_BASE_PATH || '/';

function App() {
  return (
    <BrowserRouter basename={BASE_PATH}>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </BrowserRouter>
  );
}

Настройка сборщика (Webpack)

Для корректной загрузки статических ресурсов (JavaScript, CSS, изображения) необходимо настроить publicPath в вашем сборщике. В Webpack это делается в конфигурации. Значение publicPath должно совпадать с base path вашего приложения. Его также можно сделать динамическим, используя переменные окружения.

// webpack.config.js
module.exports = {
  output: {
    publicPath: process.env.PUBLIC_PATH || '/',
  },
  // ... остальная конфигурация
};

Если вы используете Create React App, вы можете задать переменную окружения PUBLIC_URL перед сборкой. Например, PUBLIC_URL=/my-app npm run build. Это автоматически установит publicPath в Webpack и будет использоваться для префикса путей к ресурсам в HTML.

Работа со ссылками и API-запросами

При использовании base path все относительные ссылки на ресурсы (например, изображения) и API-эндпоинты должны учитывать этот префикс. Для ссылок внутри приложения используйте компонент <Link> из React Router, который автоматически учитывает basename. Для API-запросов рекомендуется использовать абсолютные URL или создавать базовый экземпляр axios/fetch с заданным префиксом.

// Пример настройки axios с базовым URL
import axios from 'axios';

const api = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL || '/api',
});

// Все запросы через этот экземпляр будут иметь правильный префикс.
api.get('/users').then(response => console.log(response));

Вывод: Динамический base path стоит реализовывать, когда ваше React-приложение планируется развертывать в поддиректории. Это обеспечивает корректную работу маршрутизации и загрузку ресурсов в таких средах, как микросервисы, корпоративные порталы или shared хостинги.