Компонент BrowserRouter

BrowserRouter — это основной компонент маршрутизации в React Router, который позволяет создавать SPA (Single Page Application) с управлением URL через History API браузера. Он оборачивает приложение и обеспечивает контекст маршрутов для всех вложенных компонентов Route, Link и других элементов навигации.

import { BrowserRouter } from 'react-router-dom';
import App from './App';

function Root() {
  return (
    
      
    
  );
}

Ключевой момент: BrowserRouter должен быть корневым компонентом, оборачивающим всё приложение, иначе маршруты внутри него не будут работать.

Атрибуты и свойства BrowserRouter

  1. basename Позволяет указать базовый путь для всех маршрутов приложения. Полезно при развертывании на поддиректории.

    В этом случае маршрут /about будет доступен как /myapp/about.

  2. children Компоненты, которые будут иметь доступ к контексту маршрутов. Обычно это или набор маршрутов.

  3. window Позволяет использовать нестандартный объект window, что удобно для тестирования или рендеринга на сервере.

Работа с маршрутами внутри BrowserRouter

Все компоненты Route и Link должны находиться внутри BrowserRouter. Пример базовой конфигурации:

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

function App() {
  return (
    <>
      
      
        } />
        } />
      
    
  );
}

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

История и управление навигацией

BrowserRouter использует HTML5 History API (pushState, replaceState, popstate) для изменения URL без перезагрузки страницы. Это обеспечивает возможность:

  • перехода вперед и назад с помощью history.back() и history.forward(),
  • программной навигации через хук useNavigate():
import { useNavigate } from 'react-router-dom';

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

  const handleLogin = () => {
    authenticateUser();
    navigate('/dashboard'); // переход после логина
  };

  return ;
}

Поддержка вложенных маршрутов

BrowserRouter позволяет создавать вложенные маршруты с любым уровнем иерархии. Это реализуется через сочетание и :


  }>
    } />
    } />
    }>
      } />
      } />

Особенности:

  • index указывает на маршрут по умолчанию внутри родительского маршрута.
  • Вложенные маршруты наследуют путь родителя (/dashboard/stats).

Работа с динамическими параметрами

BrowserRouter поддерживает параметры URL через синтаксис :param. Пример:

} />

В компоненте UserProfile доступ к параметру id осуществляется через хук useParams():

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

function UserProfile() {
  const { id } = useParams();
  return 
Профиль пользователя {id}
;
}

Программная навигация и редиректы

  • useNavigate — основной инструмент для программного перехода.
  • navigate(to, { replace: true }) — заменяет текущую запись в истории, вместо добавления новой.
  • Редиректы через :
import { Navigate } from 'react-router-dom';

function ProtectedRoute({ isAuthenticated, children }) {
  return isAuthenticated ? children : ;
}

Особенности и ограничения

  • Не поддерживает hash-навигацию (для этого используется HashRouter).
  • URL должен соответствовать настройкам сервера: при прямом переходе на /about сервер должен отдавать index.html.
  • При тестировании возможно использовать MemoryRouter вместо BrowserRouter.

Советы по использованию

  • Использовать basename при развертывании в поддиректории.
  • Всегда оборачивать приложение в единый на верхнем уровне.
  • Программные переходы делать через useNavigate вместо прямой работы с window.location.
  • Для вложенных маршрутов тщательно проектировать структуру, чтобы избежать конфликтов путей.
Оглавление