Компонент HashRouter

HashRouter — это компонент маршрутизации, предоставляемый библиотекой React Router, который управляет историей навигации приложения с использованием хэшей (#) в URL. В отличие от BrowserRouter, который использует HTML5 History API, HashRouter формирует URL вида http://example.com/#/path, что обеспечивает совместимость с серверами, не поддерживающими серверную обработку маршрутов.

Основное использование

Импортировать HashRouter необходимо из пакета react-router-dom:

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

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </HashRouter>
  );
}

export default App;

Ключевые моменты:

  • HashRouter автоматически добавляет # в URL.
  • Все маршруты после # интерпретируются как клиентские маршруты React, не требуя серверной поддержки.
  • Удобен для статических сайтов, хостящихся без серверной конфигурации.

Отличия от BrowserRouter

Характеристика BrowserRouter HashRouter
URL /about /#/about
Поддержка сервера Требуется настройка сервера для всех маршрутов Не требует настройки сервера
Использование History API Да Нет
Совместимость Современные браузеры Широкая, включая старые браузеры и статические хостинги

Настройка базового пути

HashRouter принимает проп basename, который позволяет задать базовый путь приложения. Это полезно, если приложение размещается в подкаталоге.

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

В этом примере URL для страницы About будет выглядеть как http://example.com/#/myapp/about.

Навигация внутри HashRouter

Для перехода между маршрутами используется компонент <Link> или хук useNavigate.

import { Link, useNavigate } from 'react-router-dom';

function Navigation() {
  const navigate = useNavigate();

  return (
    <div>
      <Link to="/">Главная</Link>
      <Link to="/about">О нас</Link>
      <button onCl ick={() => navigate('/about')}>Перейти на About</button>
    </div>
  );
}

Особенности поведения:

  • Навигация через Link обновляет часть URL после #, не перезагружая страницу.
  • useNavigate позволяет программно менять маршрут.
  • История браузера (back/forward) корректно работает с хэшами.

Работа с параметрами маршрута

HashRouter поддерживает динамические параметры так же, как и BrowserRouter. Для их использования применяется синтаксис :param:

<Route path="/user/:id" element={<UserProfile />} />

В компоненте UserProfile можно получить параметр через хук useParams:

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams();
  return <div>Пользователь ID: {id}</div>;
}

URL будет вида http://example.com/#/user/123, и компонент отобразит Пользователь ID: 123.

Работа с вложенными маршрутами

HashRouter полностью поддерживает вложенные маршруты:

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="settings" element={<Settings />} />
  <Route path="profile" element={<Profile />} />
</Route>
  • Вложенные маршруты добавляются к родительскому пути.
  • Использование <Outlet /> в родительском компоненте позволяет рендерить дочерние элементы:
import { Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Панель управления</h1>
      <Outlet />
    </div>
  );
}

Преимущества HashRouter

  1. Простота деплоя: работает на любом статическом сервере без настройки перенаправлений.
  2. Совместимость с старыми браузерами.
  3. Локальные маршруты не конфликтуют с серверными URL.

Ограничения

  • Менее читаемые URL из-за символа #.
  • Не поддерживает History API, что ограничивает интеграцию с некоторыми инструментами аналитики или SEO.
  • Ограниченная гибкость по сравнению с BrowserRouter при сложной маршрутизации на сервере.

Полезные советы

  • Для SPA на GitHub Pages или Netlify HashRouter предпочтительнее, чем BrowserRouter.
  • Использовать basename для развертывания приложения в подкаталогах.
  • Следить за корректной маршрутизацией вложенных компонентов через <Outlet />.

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

Оглавление