В чем разница между React Router и библиотекой history?

Обзор

React Router — это обёртка над history library, которая упрощает управление маршрутизацией и навигацией в React-приложениях.

Ключевые отличия

Основа на History Library

React Router строится на основе history library, которая работает напрямую с объектом window.history браузера. History library управляет стеком истории сессии браузера и предоставляет низкоуровневые API для управления навигацией.

Поддерживаемые типы History

React Router скрывает сложность, предоставляя несколько реализаций history:

• Browser history — использует HTML5 History API для чистых URL в современных браузерах
• Hash history — использует хеш-фрагменты в URL для маршрутизации, что удобно для старых браузеров
• Memory history — хранит историю навигации в памяти JavaScript, не затрагивая URL

Основные случаи использования

Преимущества Memory History

Вариант memory history особенно полезен в окружениях, где стандартной истории браузера нет:

• Разработка мобильных приложений с React Native
• Юнит-тестирование в окружении Node.js
• Серверный рендеринг
• Progressive web apps с кастомными флоу навигации

Почему использовать React Router

Вместо того чтобы работать с history library напрямую, React Router предоставляет:

• Упрощённую маршрутизацию на основе компонентов с <Route>, <Link> и <NavLink>
• Автоматическую синхронизацию URL с состоянием приложения
• Встроенную поддержку вложенных маршрутов и динамического матчинга маршрутов
• Удобное управление переходами между маршрутами и параметрами

Итог

По сути, React Router — это высокоуровневая абстракция, которая использует core-функциональность history library, но предоставляет более интуитивный и идиоматичный для React API для управления навигацией приложения в разных окружениях.