Что такое base URL в React Router и зачем он нужен?

В веб-разработке, особенно при развёртывании одностраничных приложений (SPA), часто возникает ситуация, когда приложение размещается не в корневой директории домена, а внутри подпапки. Например, оно может быть доступно по адресу https://company.com/dashboard/ или https://github.com/username/project-name/ (для GitHub Pages). React Router по умолчанию предполагает, что приложение работает от корня (/). Если это не так, все относительные маршруты (например, /users или /settings) будут разрешаться относительно корня сервера, что приведёт к ошибкам 404 или некорректному отображению компонентов.

Что такое basename?

Проп basename в компоненте <BrowserRouter> (или <HashRouter>) позволяет указать базовый путь для всего приложения. Все маршруты, определённые внутри этого роутера, будут автоматически иметь этот префикс. Это влияет на:

• Генерацию ссылок компонентом <Link to="...">.
• Сопоставление путей в <Route path="...">.
• Работу хуков, таких как useNavigate() и useLocation().

Как это использовать?

Вы задаёте basename при создании роутера. Вот практический пример:

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

function App() {
  // Приложение развёрнуто в поддиректории /admin
  return (
    <BrowserRouter basename="/admin">
      <nav>
        <Link to="/">Dashboard</Link> // Фактический путь: /admin/
        <Link to="/users">Users</Link> // Фактический путь: /admin/users
      </nav>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/users" element={<UsersList />} />
      </Routes>
    </BrowserRouter>
  );
}

В этом примере, если пользователь перейдёт по адресу /admin/users, React Router корректно отобразит компонент UsersList, потому что он знает, что базовый путь — /admin.

Важные нюансы

• Серверная конфигурация: Указание basename в React Router не заменяет настройку сервера. Ваш веб-сервер (Nginx, Apache) или хостинг (GitHub Pages, Netlify) также должен быть сконфигурирован так, чтобы все запросы в пределах /your-base-path перенаправлялись на ваш index.html (правило "catch-all" для SPA).
• Абсолютные пути: Если вы используете абсолютные URL (начинающиеся с /) внутри basename, они будут автоматически дополнены. Относительные пути (без ведущего слэша) работают относительно текущего URL.
• Хэш-роутер: Для HashRouter принцип тот же, но хэш-фрагмент (#) добавляется после базового пути.

Вывод: Используйте basename в React Router, когда ваше приложение развёртывается в поддиректории на сервере. Это необходимое условие для корректной работы маршрутизации, навигации и избежания ошибок 404 в продакшн-окружении.