Настройка базового пути приложения

React Router предоставляет мощный механизм управления навигацией в React-приложениях. Одним из ключевых аспектов является корректная настройка базового пути (basename) для маршрутизатора, что особенно важно при развертывании приложения в подкаталоге или при использовании динамических путей.

Использование BrowserRouter с basename

Компонент BrowserRouter отвечает за управление историей браузера через HTML5 History API. Для того чтобы все маршруты работали корректно при размещении приложения не в корне домена, используется свойство basename.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter basename="/my-app">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

В этом примере:

  • basename="/my-app" указывает, что все пути будут считаться относительно /my-app.
  • Маршрут / фактически будет доступен по адресу /my-app/.
  • Маршрут /about — по адресу /my-app/about.

Динамическая настройка базового пути

В некоторых случаях базовый путь может зависеть от переменной окружения, например, при различном развертывании в development и production. Для этого удобно использовать переменные окружения:

const basename = process.env.REACT_APP_BASENAME || '/';

<BrowserRouter basename={basename}>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>
  • REACT_APP_BASENAME можно задать в .env файле: REACT_APP_BASENAME=/my-app
  • При отсутствии переменной используется корневой путь /.

Настройка базового пути для вложенных маршрутов

Если приложение использует вложенные маршруты, basename будет автоматически применяться ко всем дочерним маршрутам:

<BrowserRouter basename="/dashboard">
  <Routes>
    <Route path="/" element={<DashboardHome />} />
    <Route path="settings" element={<Settings />} />
    <Route path="users" element={<Users />} />
  </Routes>
</BrowserRouter>
  • /dashboard/ → DashboardHome
  • /dashboard/settings → Settings
  • /dashboard/users → Users

Это позволяет не добавлять вручную префикс ко всем путям.

Настройка для серверного рендеринга

При использовании React Router в связке с серверным рендерингом через ReactDOMServer, basename также необходим для корректной генерации маршрутов и ссылок. Например, в StaticRouter:

import { StaticRouter } from 'react-router-dom/server';

function render(url) {
  return (
    <StaticRouter location={url} basename="/my-app">
      <App />
    </StaticRouter>
  );
}
  • location указывает текущий URL запроса.
  • basename обеспечивает, что все пути внутри приложения соответствуют базовому пути на сервере.

Компоненты для навигации автоматически учитывают basename:

<Link to="/">Главная</Link>       // Перенаправит на /my-app/
<Link to="/about">О нас</Link>    // Перенаправит на /my-app/about
  • Нет необходимости вручную добавлять префикс /my-app.
  • Это упрощает поддержку ссылок при изменении базового пути.

Поддержка HashRouter с базовым путем

Если используется HashRouter, basename также поддерживается:

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

<HashRouter basename="/my-app">
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/contact" element={<Contact />} />
  </Routes>
</HashRouter>
  • Путь будет строиться как /#/my-app/ и /#/my-app/contact.
  • HashRouter полезен для приложений, где сервер не обрабатывает URL, а весь маршрут находится на клиенте.

Практические советы

  1. Использовать переменные окружения для автоматической настройки базового пути в разных окружениях.
  2. Не дублировать префиксы вручную — basename автоматически применяется ко всем маршрутам и ссылкам.
  3. Проверять ссылки и редиректы после изменения basename для корректной работы навигации.
  4. Вложенные маршруты и basename хорошо сочетаются, что позволяет создавать многоуровневые структуры путей без ошибок.

Эти механизмы обеспечивают правильное функционирование маршрутов приложения вне зависимости от структуры URL и способа развертывания, позволяя гибко управлять базовым путем в React-приложениях.

Оглавление