Я новачок у програмуванні, що трохи ускладнює мене для розуміння, якщо я читаю офіційні документи.

Я читав про React Router 4 звідси

У цій статті автор говорив про <HashRouter>та<BrowserRouter>

Це те, що він згадав

HashRouter в основному використовує хеш у URL-адресі для візуалізації компонента. Оскільки я будував статичний веб-сайт на одній сторінці, мені потрібно було цим скористатися.

BrowserRouter , він використовує API історії HTML5 для візуалізації компонента. Історію можна змінювати за допомогою pushState і replaceState. Більше інформації можна знайти тут

Тепер я не отримую значень і випадків використання для обох, наприклад, що він має на увазі, коли каже, що історію можна змінювати за допомогою pushState і replaceState, і вона використовує хеш у URL-адресі для візуалізації компонента

Хоча перше пояснення для BrowserRouter для мене абсолютно розпливчасте, друге пояснення щодо HashRouter також не має сенсу, наприклад, чому б хтось використовував Hash (#) в URL-адресі для візуалізації компонента?

BrowserRouter

Він використовує API історії , тобто недоступний для застарілих браузерів (IE 9 і старіших версій та сучасників). Клієнтська програма React здатна підтримувати чисті маршрути, такі як example.com/react/route, але має бути підтримана веб-сервером. Зазвичай це означає, що веб-сервер повинен бути налаштований на односторінковий додаток, тобто той самий index.htmlподається для шляху / реакції / маршруту або будь-якого іншого маршруту на стороні сервера. На стороні клієнта window.location.pathnameаналізується React-маршрутизатором. Маршрутизатор React відображає компонент, який він був налаштований на візуалізацію / реакцію / маршрут .

Крім того, налаштування може передбачати візуалізацію на стороні сервера, index.htmlможе містити відтворені компоненти або дані, які є специфічними для поточного маршруту.

HashRouter

Він використовує хеш URL-адреси, він не обмежує підтримувані браузери або веб-сервер. Серверна маршрутизація не залежить від маршрутизації на стороні клієнта.

Зворотно сумісна односторінкова програма може використовувати її як example.com/#/react/route . Налаштування неможливо створити резервною копією за допомогою рендеринга на стороні сервера, оскільки це / path, який подається на стороні сервера, # / response / route хеш URL-адреси не може бути прочитаний з боку сервера. На стороні клієнта window.location.hashаналізується React-маршрутизатором. Маршрутизатор React відображає компонент, який він був налаштований на візуалізацію / реакцію / маршрут , подібно до BrowserRouter.

Найголовніше, HashRouterвипадки використання не обмежуються SPA. Веб-сайт може мати застарілу або зручну для пошукової системи маршрутизацію на стороні сервера, тоді як програма React може бути віджетом, який підтримує свій стан у URL-адресі, наприклад example.com/server/side/route#/react/route . Деяка сторінка, що містить додаток React, подається на стороні сервера для / server / side / route , а потім на стороні клієнта React router відображає компонент, який він був налаштований для візуалізації для / response / route , подібно до попереднього сценарію.

СЕРВЕРНА СТОРОНА: HashRouter використовує в URL-адресі хеш-символ, який впливає на те, що весь наступний вміст URL-адреси ігнорується в запиті сервера (тобто ви надсилаєте "www.mywebsite.com/#/person/john", сервер отримує "www .mywebsite.com ". В результаті сервер поверне попередню відповідь URL-адреси, а потім шлях # post буде оброблений, проаналізований вашим додатком для реагування на стороні клієнта.

КЛІЄНТОВА СТОРОНА: BrowserRouter не додаватиме символ # до вашої URL-адреси, однак створюватиме проблеми при спробі встановити посилання на сторінку або перезавантажити сторінку. Якщо явний маршрут існує у вашому додатку для реагування клієнта, але не на вашому сервері, перезавантаження та зв’язування (все, що потрапляє безпосередньо на сервер) поверне 404 не знайдені помилки.

"Використовувати кейси"

HashRouter: Коли у нас є невеликі програми на стороні клієнта, які не потребують серверної бази, ми можемо використовувати їх, HashRouterоскільки, коли ми використовуємо хеші в URL-адресі / рядку розташування, браузер не робить запит сервера.

BrowserRouter: Коли у нас є великі готові до виробництва програми, які обслуговують серверну інформацію, рекомендується використовувати <BrowserRouter>.

Посилання за книгою: Learning React: Функціональна веб-розробка за допомогою React та Redux Автор: Алекс Бенкс, Єва Порчелло

Обидва BrowserRouterі HashRouterкомпоненти були введені в React ver.4 маршрутизатора як підкласи Routerкласу. Просто BrowserRouterсинхронізує інтерфейс користувача з поточною URL-адресою у вашому браузері. Це робиться за допомогою API історії HTML-5. З іншого боку, HashRouterвикористовує хеш-частину URL-адреси для синхронізації.

Оновлення сторінки змушує браузер надсилати на сервер запит GET за поточним маршрутом. Значення # було використано для запобігання нам надсилання цього запиту GET. Ми використовуємо BrowserRouter, оскільки хочемо, щоб запит GET був відправлений на сервер. Для того, щоб відобразити маршрутизатор на сервері, нам потрібно розташування - нам потрібен маршрут. Цей маршрут буде використовуватися на сервері, щоб повідомити маршрутизатору, що відображати. BrowserRouter використовується, коли ви хочете робити маршрути ізоморфно.

Ще один варіант використання, який я хочу додати. Використовуючи BrowserRouter або Router, він буде добре працювати на нашому сервері вузлів. Тому що він розуміє клієнтську маршрутизацію (попередньо налаштовану).

Але поки ми розгортаємо нашу програму збірки React на сервері Apache (просто скажімо PHP, на GoDaddy), тоді маршрутизація не працюватиме належним чином. Він потрапить у 404, для цього нам потрібно налаштувати файл .htaccess . Після цього також для мене кожен клік / url, його відправлення запиту на сервер.

У такому випадку краще ми використовуємо HASH Routing (#). # ми використовуємо це на нашій html-сторінці для обміну вмістом HTML, і це не призведе до запиту сервера.

У наведеному вище сценарії ми можемо використовувати HashRouting, тобто всю URL-адресу, яка присутня після #, ми можемо застосувати наші правила маршрутизації як SPA.

В основному, якщо користувач використовує BrowserRouter, можна використовувати URL-адресу типу "soAndSoReactPage /: id"

наприклад:

with a Route <Route path="soAndSoReactPage/:id"><soAndSoReactComponent/></Route>

тепер, у компоненті реакції "soAndSoReactComponent" "id" потім можна витягти за допомогою useParams, і таким чином ви можете відобразити сторінку "soAndSoReactComponent" відповідно до ідентифікатора

такого не можна зробити за допомогою HashedRouter,