В чем разница между HashRouter и BrowserRouter в React?
Я новичок в программировании, поэтому мне немного сложно понять, если я читаю официальную документацию.
Я читал про React Router 4 отсюда
В этой статье автор говорил о <HashRouter> и <BrowserRouter>.
Вот что он упомянул:
HashRouter в основном использует хэш в URL для рендеринга компонента. Поскольку я создавал статический одностраничный веб-сайт, мне нужно было использовать это.
BrowserRouter, он использует API истории HTML5 для рендеринга компонента. Историю можно изменить с помощью pushState и replaceState. Более подробную информацию можно найти здесь
Теперь я не понимаю значения и вариантов использования для обоих, например, что он имеет в виду, когда говорит история может быть изменена через pushState и replaceState и он использует хэш в URL-адресе для рендеринга компонента
Хотя первое объяснение BrowserRouter для меня совершенно расплывчато, второе объяснение о HashRouter также не имеет смысла, например, зачем кому-то использовать Hash (#) в URL-адресе для рендеринга компонента?
Вы не предоставили отзыв на существующие ответы. Поскольку они уже отвечают на вопрос напрямую, было бы целесообразно уточнить, какого внимания требует этот вопрос.
Ответы 9
СТОРОНА СЕРВЕРА: HashRouter использует хэш-символ в URL-адресе, что означает, что все последующее содержимое URL-адреса игнорируется в запросе сервера (т.е. вы отправляете «www.mywebsite.com/#/person/john», сервер получает «www.mywebsite .com ". В результате сервер вернет URL-ответ pre #, а затем путь post # будет обработан приложением реакции на стороне клиента.
СТОРОНА КЛИЕНТА: BrowserRouter не будет добавлять символ # к вашему URL-адресу, однако будет создавать проблемы при попытке установить ссылку на страницу или перезагрузить страницу. Если явный маршрут существует в вашем клиентском приложении для реагирования, но не на вашем сервере, перезагрузка и связывание (все, что напрямую попадает на сервер) вернет ошибку 404 not found.
BrowserRouter
Он использует API истории, то есть он недоступен для устаревших браузеров (IE 9 и ниже и современные). Клиентское приложение React может поддерживать чистые маршруты, такие как example.com/react/route, но должно поддерживаться веб-сервером. Обычно это означает, что веб-сервер должен быть настроен для одностраничного приложения, т.е. тот же index.html обслуживается для пути / реагировать / маршрут или любого другого маршрута на стороне сервера. На стороне клиента window.location.pathname анализируется маршрутизатором React. Маршрутизатор React отображает компонент, который был настроен для рендеринга для / реагировать / маршрут.
Кроме того, установка может включать рендеринг на стороне сервера, index.html может содержать отрисованные компоненты или данные, относящиеся к текущему маршруту.
HashRouter
Он использует хеш URL, он не накладывает ограничений на поддерживаемые браузеры или веб-сервер. Маршрутизация на стороне сервера не зависит от маршрутизации на стороне клиента.
Обратно совместимое одностраничное приложение может использовать его как example.com/#/react/route. Установка не может быть скопирована с помощью рендеринга на стороне сервера, потому что это путь /, который обслуживается на стороне сервера, хэш URL # / реагировать / маршрут не может быть прочитан со стороны сервера. На стороне клиента window.location.hash анализируется маршрутизатором React. Маршрутизатор React отображает компонент, который был настроен для рендеринга для / реагировать / маршрут, аналогично BrowserRouter.
Самое главное, что варианты использования HashRouter не ограничиваются SPA. Веб-сайт может иметь устаревшую или удобную для поисковых систем маршрутизацию на стороне сервера, в то время как приложение React может быть виджетом, который поддерживает свое состояние в URL-адресе, например example.com/server/side/route#/react/route. Некоторая страница, содержащая приложение React, обслуживается на стороне сервера для / сервер / сторона / маршрут, затем на стороне клиента маршрутизатор React отображает компонент, который был настроен для визуализации для / реагировать / маршрут, аналогично предыдущему сценарию.
Еще один момент - если вам нужна навигация по якорям на странице (которая, как правило, была разработана для location.hash и должна работать из коробки), это немного сложнее реализовать.
@iRohitBhatia BrowserHistory также позволяет выполнять рендеринг на стороне сервера, поскольку сервер имеет доступ к полному URL-адресу. У сервера нет доступа к пути за #.
Компоненты BrowserRouter и HashRouter были представлены в React Router версии 4 как подклассы класса Router. Просто BrowserRouter синхронизирует пользовательский интерфейс с текущим URL-адресом в вашем браузере. Это делается с помощью HTML-5 History API. С другой стороны, HashRouter использует хеш-часть вашего URL-адреса для синхронизации.
"Сценарии использования"
HashRouter: Когда у нас есть небольшие клиентские приложения, которым не нужен бэкэнд, мы можем использовать HashRouter, потому что, когда мы используем хэши в URL / адресной строке, браузер не делает запрос к серверу.
BrowserRouter: Когда у нас есть большие готовые к производству приложения, которые обслуживают бэкэнд, рекомендуется использовать <BrowserRouter>.
Ссылка по книге: Learning React: функциональная веб-разработка с помощью React и Redux Авторы: Алекс Бэнкс, Ева Порчелло
Имхо «HashRouter» против «BrowserRouter» не имеет ничего общего с «маленькими» и «большими готовыми к производству» приложениями. При использовании HashRouter в больших готовых к эксплуатации приложениях нет ни ограничений, ни проблем с производительностью. Все дело в конкретном варианте использования, требованиях и итоговой архитектуре. Бессерверные производственные приложения - это реальность.
Еще один вариант использования, который я хочу добавить. При использовании BrowserRouter или Router он будет нормально работать на нашем сервере узлов. Потому что он понимает маршрутизацию клиентов (предварительно настроен).
Но пока мы развертываем наше приложение React для сборки на сервере Apache (просто скажем PHP, на GoDaddy), маршрутизация не будет работать должным образом. Он попадет в 404, для этого нам нужно настроить файл .htaccess. После этого также для меня каждый щелчок / URL, его отправка запроса на сервер.
В этом случае лучше использовать HASH Routing (#). # мы используем это на нашей html-странице для перемещения по HTML-контенту, и это не приведет к запросу сервера.
В приведенном выше сценарии мы можем использовать HashRouting, то есть все URL-адреса, которые присутствуют после #, мы можем заставить наши правила маршрутизации работать как SPA.
При обновлении страницы браузер отправляет на сервер запрос GET, используя текущий маршрут. Знак # использовался, чтобы помешать нам отправить этот запрос GET. Мы используем BrowserRouter, потому что хотите, чтобы запрос GET был отправлен на сервер. Для рендеринга роутера на сервере нам понадобится локация - нам нужен маршрут. Этот маршрут будет использоваться на сервере, чтобы сообщить маршрутизатору, что нужно отображать. BrowserRouter используется, когда вы хотите изоморфно отображать маршруты.
Следует отметить самое важное.
В основном, если используется BrowserRouter, можно использовать URL-адрес типа "soAndSoReactPage /: id"
например:
with a Route <Route path = "soAndSoReactPage/:id"><soAndSoReactComponent/></Route>
теперь в компоненте реакции "soAndSoReactComponent" затем "id" можно извлечь с помощью useParams и, таким образом, вы можете отобразить страницу "soAndSoReactComponent" в соответствии с идентификатором
такое невозможно сделать с HashedRouter,
Нет, он работает как для BrowserRouter, так и для HashRouter.
Согласно https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md авторы не рекомендуют HashRouter для общих сценариев:
As this technique is only intended to support legacy browsers, we encourage you to configure your server to work with BrowserHistory instead.
Основной сценарий использования для выбора «хэш-маршрутизатора» вместо «браузерного маршрутизатора» - в производственной среде. Допустим, у нас есть URL-адрес «www.example.com/Example». В этом случае некоторые серверы обычно находят папку с именем «Пример» и в конечном итоге возвращают 404, поскольку у нас есть только одностраничное приложение index.html. Итак, чтобы избежать такой путаницы, мы используем «www.example.com/#/Example» и то, где светит хэш-маршрутизатор.
ресурс: https://www.techblogsnews.com/post/browser-router-vs-hash-router-in-react-js