Ich bin neu in der Programmierung, was es für mich etwas schwierig macht, Dinge zu verstehen, wenn ich die offiziellen Dokumente lese.

Ich habe von hier aus über React Router 4 gelesen

In diesem Artikel sprach der Autor über <HashRouter>und<BrowserRouter>

Das hat er erwähnt

HashRouter verwendet im Grunde den Hash in der URL, um die Komponente zu rendern. Da ich eine statische einseitige Website erstellt habe, musste ich diese verwenden.

BrowserRouter verwendet die HTML5-Verlaufs-API, um die Komponente zu rendern. Der Verlauf kann über pushState und replaceState geändert werden. Weitere Informationen finden Sie hier

Nun, ich habe nicht die Bedeutung und Anwendungsfälle für beide, Wie , was bedeutet er , wenn er sagt , die Geschichte über und replaceState pushstate modifiziert werden , und es verwendet den Hash in der URL , um die Komponente zu machen

Während die erste Erklärung für BrowserRouter für mich völlig vage ist, macht die zweite Erklärung zu HashRouter ebenfalls keinen Sinn. Warum sollte jemand Hash (#) in der URL verwenden, um die Komponente zu rendern?

BrowserRouter

Es verwendet die Verlaufs-API , dh es ist für ältere Browser (IE 9 und niedriger sowie Zeitgenossen) nicht verfügbar. Die clientseitige React-Anwendung kann saubere Routen wie example.com/react/route verwalten , muss jedoch vom Webserver unterstützt werden. Normalerweise bedeutet dies, dass der Webserver für Anwendungen mit nur einer Seite konfiguriert werden sollte, dh dass index.htmler für den Pfad / react / route oder eine andere Route auf der Serverseite bereitgestellt wird. Auf der Clientseite window.location.pathnamewird vom React-Router analysiert. Der React-Router rendert eine Komponente, die für das Rendern für / react / route konfiguriert wurde .

Darüber hinaus kann das Setup serverseitiges Rendern index.htmlumfassen und gerenderte Komponenten oder Daten enthalten, die für die aktuelle Route spezifisch sind.

HashRouter

Es verwendet URL-Hash und setzt keine Einschränkungen für unterstützte Browser oder Webserver. Das serverseitige Routing ist unabhängig vom clientseitigen Routing.

Die abwärtskompatible einseitige Anwendung kann sie als example.com/#/react/route verwenden . Das Setup kann nicht durch serverseitiges Rendern gesichert werden, da der / path auf der Serverseite bereitgestellt wird und der URL-Hash # / react / route nicht von der Serverseite gelesen werden kann. Auf der Clientseite window.location.hashwird vom React-Router analysiert. Der React-Router rendert eine Komponente, für die das Rendern für / react / route konfiguriert wurde , ähnlich wie BrowserRouter.

Am wichtigsten ist, dass HashRouterAnwendungsfälle nicht auf SPA beschränkt sind. Eine Website verfügt möglicherweise über ein altes oder suchmaschinenfreundliches serverseitiges Routing, während die React-Anwendung möglicherweise ein Widget ist, das seinen Status in einer URL wie example.com/server/side/route#/react/route beibehält . Einige Seiten, die die React-Anwendung enthalten, werden auf der Serverseite für / server / side / route bereitgestellt. Auf der Clientseite rendert der React-Router eine Komponente, die für das Rendern für / react / route konfiguriert wurde , ähnlich wie im vorherigen Szenario.

SERVER-SEITE: HashRouter verwendet ein Hash-Symbol in der URL, wodurch alle nachfolgenden URL-Pfadinhalte in der Serveranforderung ignoriert werden (dh Sie senden "www.mywebsite.com/#/person/john", der Server erhält "www .mywebsite.com ". Infolgedessen gibt der Server die Antwort vor der URL zurück, und der Pfad nach der URL wird von Ihrer clientseitigen Reaktionsanwendung analysiert.

KUNDENSEITE : BrowserRouter hängt das Symbol # nicht an Ihre URL an, verursacht jedoch Probleme, wenn Sie versuchen, auf eine Seite zu verlinken oder eine Seite neu zu laden. Wenn die explizite Route in Ihrer Client-React-App vorhanden ist, jedoch nicht auf Ihrem Server, werden beim erneuten Laden und Verknüpfen (alles, was direkt auf den Server trifft) 404 nicht gefundene Fehler zurückgegeben.

Beide BrowserRouterund HashRouterKomponenten wurden in React Router Version 4 als Unterklassen der RouterKlasse eingeführt. BrowserRouterSynchronisiert einfach die Benutzeroberfläche mit der aktuellen URL in Ihrem Browser. Dies erfolgt mithilfe der HTML-5-Verlaufs-API. HashRouterVerwendet andererseits den Hash-Teil Ihrer URL zum Synchronisieren.

"Anwendungsfälle"

HashRouter: Wenn wir kleine clientseitige Anwendungen haben, die kein Backend benötigen, können wir diese verwenden, HashRouterda bei Verwendung von Hashes im URL- / Standortleisten-Browser keine Serveranforderung gestellt wird.

BrowserRouter: Wenn wir große produktionsbereite Anwendungen haben, die das Backend bedienen, wird die Verwendung empfohlen <BrowserRouter>.

Referenz nach Buch: Learning React: Funktionale Webentwicklung mit React und Redux Von Alex Banks, Eve Porcello

Durch das Aktualisieren der Seite sendet der Browser eine GET-Anforderung unter Verwendung der aktuellen Route an den Server. Das # wurde verwendet, um zu verhindern, dass wir diese GET-Anfrage senden. Wir verwenden den BrowserRouter, weil wir möchten, dass die GET-Anforderung an den Server gesendet wird. Um den Router auf dem Server zu rendern, benötigen wir einen Speicherort - wir benötigen die Route. Diese Route wird auf dem Server verwendet, um dem Router mitzuteilen, was gerendert werden soll. Der BrowserRouter wird verwendet, wenn Sie Routen isomorph rendern möchten.

Ein weiterer Anwendungsfall, den ich hinzufügen möchte. Wenn Sie BrowserRouter oder Router verwenden, funktioniert dies auf unserem Knotenserver einwandfrei. Weil es das Client-Routing versteht (vorkonfiguriert).

Aber während wir unsere Build React-App auf einem Apache-Server bereitstellen (sagen wir einfach PHP auf GoDaddy), funktioniert das Routing nicht wie erwartet. Es wird in 404 landen, dafür müssen wir die .htaccess- Datei konfigurieren . Danach auch für mich jeder Klick / URL, seine Anfrage an den Server zu senden.

In diesem Fall verwenden wir besser HASH Routing (#). # Wir verwenden dies auf unserer HTML-Seite zum Durchlaufen von HTML-Inhalten und es führt nicht zu Serveranfragen.

Im obigen Szenario können wir HashRouting verwenden, dh alle URLs, die nach # vorhanden sind. Wir können unsere Routing-Regeln als SPA verwenden.