Jestem nowy w programowaniu, co sprawia, że ​​trochę trudno mi zrozumieć, kiedy czytam oficjalne dokumenty.

Czytałem stąd o React Router 4

W tym artykule autor mówił o <HashRouter>i<BrowserRouter>

O tym właśnie wspomniał

HashRouter w zasadzie używa skrótu w adresie URL do renderowania komponentu. Ponieważ budowałem statyczną, jednostronicową witrynę internetową, potrzebowałem tego.

BrowserRouter , używa API historii HTML5 do renderowania komponentu. Historię można modyfikować za pomocą pushState i replaceState. Więcej informacji można znaleźć tutaj

Teraz nie rozumiem znaczenia i przypadków użycia obu, na przykład co ma na myśli, mówiąc, że historię można modyfikować za pomocą pushState i replaceState i używa hasha w adresie URL do renderowania komponentu

Podczas gdy pierwsze wyjaśnienie BrowserRoutera jest dla mnie całkowicie niejasne, drugie wyjaśnienie dotyczące HashRouter również nie ma sensu, na przykład dlaczego ktoś miałby używać Hash (#) w adresie URL do renderowania komponentu?

BrowserRouter

Używa API historii , tzn. Jest niedostępne dla starszych przeglądarek (IE 9 i starszych oraz współczesnych). Aplikacja React po stronie klienta może utrzymywać czyste trasy, takie jak example.com/react/route, ale musi być obsługiwana przez serwer WWW. Zwykle oznacza to, że serwer WWW powinien być skonfigurowany dla aplikacji jednostronicowej, tj. To samo index.htmljest obsługiwane dla ścieżki / reakcja / trasy lub dowolnej innej trasy po stronie serwera. Po stronie klienta window.location.pathnamejest analizowany przez router React. Router React renderuje komponent, który został skonfigurowany do renderowania dla / react / route .

Ponadto konfiguracja może obejmować renderowanie po stronie serwera, index.htmlmoże zawierać renderowane komponenty lub dane specyficzne dla bieżącej trasy.

HashRouter

Używa skrótu URL, nie nakłada żadnych ograniczeń na obsługiwane przeglądarki lub serwer WWW. Routing po stronie serwera jest niezależny od routingu po stronie klienta.

Aplikacja jednostronicowa, która jest wstecznie zgodna, może go używać jako example.com/#/react/route . Nie można wykonać kopii zapasowej konfiguracji przez renderowanie po stronie serwera, ponieważ jest to ścieżka / ścieżka obsługiwana po stronie serwera, hash adresu URL # / React / route nie może być odczytywany po stronie serwera. Po stronie klienta window.location.hashjest analizowany przez router React. React Router powoduje składnik, który został przystosowany do renderowania na / reakcji / droga , podobnie BrowserRouter.

Co najważniejsze, HashRouterprzypadki użycia nie są ograniczone do SPA. Witryna może mieć starszy lub przyjazny dla wyszukiwarek routing po stronie serwera, podczas gdy aplikacja React może być widżetem, który utrzymuje swój stan w adresie URL, takim jak example.com/server/side/route#/react/route . Jakaś strona zawierająca aplikację React jest udostępniana po stronie serwera dla / server / side / route , a następnie router React po stronie klienta renderuje komponent, który został skonfigurowany do renderowania dla / react / route , podobnie jak w poprzednim scenariuszu.

SERVER SIDE: HashRouter używa symbolu krzyżyka w adresie URL, co powoduje, że wszystkie kolejne treści ścieżki URL są ignorowane w żądaniu serwera (tzn. Wysyłasz „www.mywebsite.com/#/person/john” serwer otrzymuje „www .mywebsite.com ”. W rezultacie serwer zwróci odpowiedź pre # URL, a następnie ścieżka # postu zostanie obsłużona przez przeanalizowaną przez aplikację reagującą po stronie klienta.

PO STRONIE KLIENTA: BrowserRouter nie doda symbolu # do adresu URL, jednak spowoduje problemy przy próbie połączenia z linkiem do strony lub przeładowania strony. Jeśli wyraźna trasa istnieje w aplikacji reagującej na klienta, ale nie na serwerze, ponowne ładowanie i łączenie (wszystko, co trafia bezpośrednio na serwer) zwróci błędy 404 nie znaleziono.

Obie BrowserRouteri HashRouterkomponenty zostały wprowadzone w React Router w wersji 4 jako podklasy Routerklasy. Po prostu BrowserRoutersynchronizuje interfejs użytkownika z bieżącym adresem URL w przeglądarce. Odbywa się to za pomocą interfejsu API historii HTML-5. Z drugiej strony HashRouterdo synchronizacji używa części z krzyżykiem adresu URL.

"Przypadków użycia"

HashRouter: Kiedy mamy małe aplikacje po stronie klienta, które nie wymagają zaplecza, możemy ich użyć, HashRouterponieważ kiedy używamy skrótów w adresie URL / pasku adresu, przeglądarka nie wysyła żądania do serwera.

BrowserRouter: Kiedy mamy duże aplikacje gotowe do produkcji, które obsługują backend, zaleca się użycie <BrowserRouter>.

Odniesienie w książce: Learning React: Functional Web Development with React and Redux Autor: Alex Banks, Eve Porcello

Odświeżenie strony powoduje, że przeglądarka wysyła żądanie GET do serwera przy użyciu bieżącej trasy. # Został użyty, aby uniemożliwić nam wysłanie tego żądania GET. Używamy BrowserRouter, ponieważ chcemy, aby żądanie GET było wysyłane do serwera. Aby wyrenderować router na serwerze, potrzebujemy lokalizacji - potrzebujemy trasy. Ta trasa będzie używana na serwerze do informowania routera, co ma renderować. BrowserRouter jest używany, gdy chcesz renderować trasy w sposób izomorficzny.

Jeszcze jeden przypadek użycia, który chcę dodać. Podczas korzystania z BrowserRouter lub Routera będzie działać dobrze na naszym serwerze węzłowym. Ponieważ rozumie routing klienta (wstępnie skonfigurowany).

Ale podczas gdy wdrażamy naszą aplikację build React na serwerze Apache (powiedzmy po prostu PHP, na GoDaddy), routing nie będzie działał zgodnie z oczekiwaniami. Wyląduje w 404, w tym celu musimy skonfigurować plik .htaccess . Po tym również dla mnie każde kliknięcie / adres URL, jego wysłanie żądania do serwera.

W takim przypadku lepiej używamy HASH Routing (#). # używamy tego na naszej stronie html do przechodzenia po zawartości HTML i nie prowadzi to do żądania serwera.

W powyższym scenariuszu możemy użyć HashRouting, czyli całego adresu URL występującego po #, możemy ustawić nasze reguły routingu jako SPA.

Zasadniczo, jeśli używasz BrowserRouter, możesz użyć adresu URL takiego jak „soAndSoReactPage /: id”

na przykład:

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

teraz w komponencie reagującym "soAndSoReactComponent" można wyodrębnić "id" za pomocą useParams, a tym samym wyświetlić stronę "soAndSoReactComponent" zgodnie z id

czegoś takiego nie da się zrobić z HashedRouter,

Według https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md autorzy nie zalecają HashRouter w ogólnych scenariuszach:

Ponieważ ta technika jest przeznaczona tylko do obsługi starszych przeglądarek, zachęcamy do skonfigurowania serwera do współpracy.