Ich habe nachgedacht und bin verwirrt mit dem Routing zwischen Client und Server. Angenommen, ich verwende ReactJS für das serverseitige Rendern, bevor ich die Anforderung an den Webbrowser zurücksende, und verwende den React-Router als clientseitiges Routing, um zwischen Seiten zu wechseln, ohne als SPA zu aktualisieren.
Was mir in den Sinn kommt, ist:
- Wie werden die Routen interpretiert? Zum Beispiel eine Anfrage von Homepage (
/home
) zu Postseite (/posts
) - Wohin geht das Routing, auf der Serverseite oder auf dem Client?
- Woher weiß es, wie es verarbeitet wird?
javascript
reactjs
routes
react-router
url-routing
Herzmon
quelle
quelle
Antworten:
Beachten Sie, dass diese Antwort die React Router-Version 0.13.x abdeckt. Die kommende Version 1.0 scheint deutlich andere Implementierungsdetails zu haben
Server
Dies ist ein Minimum
server.js
bei React-Router:Wo das
routes
Modul eine Liste von Routen exportiert:Jedes Mal, wenn eine Anforderung an den Server gesendet wird, erstellen Sie eine
Router
Einweginstanz, die mit der eingehenden URL als statischem Speicherort konfiguriert ist. Diese wird anhand des Routenbaums aufgelöst, um die entsprechenden übereinstimmenden Routen einzurichten, und ruft mit der obersten Ebene zurück Routenhandler, der gerendert werden soll, und Aufzeichnung, welche untergeordneten Routen auf jeder Ebene übereinstimmen. Dies wird empfohlen, wenn Sie die<RouteHandler>
Komponente innerhalb einer Routenbehandlungskomponente verwenden, um eine untergeordnete Route zu rendern, die übereinstimmt.Wenn der Benutzer JavaScript deaktiviert hat oder das Laden langsam ist, werden alle Links, auf die er klickt, erneut auf den Server übertragen, was wie oben beschrieben erneut behoben wird.
Klient
Dies ist ein Minimum
client.js
bei React-Router (Wiederverwendung des gleichen Routenmoduls):Wenn Sie anrufen
Router.run()
, wird hinter den Kulissen eine Router-Instanz für Sie erstellt, die bei jeder Navigation in der App wiederverwendet wird, da die URL auf dem Client dynamisch sein kann und nicht auf dem Server, auf dem eine einzelne Anforderung eine hat feste URL.In diesem Fall verwenden wir die
HistoryLocation
, die dieHistory
API verwendet , um sicherzustellen, dass das Richtige passiert, wenn Sie auf die Schaltfläche Zurück / Vorwärts klicken. Es gibt auch eine,HashLocation
die die URL änderthash
, um Verlaufseinträge vorzunehmen, und daswindow.onhashchange
Ereignis abhört, um die Navigation auszulösen.Wenn Sie reagieren-Router verwenden
<Link>
Komponente, geben Sie ihm eineto
Stütze , die den Namen einer Route ist, sowie alleparams
undquery
die Routen Daten benötigt. Das<a>
von dieser Komponente gerenderte hat einenonClick
Handler, der letztendlichrouter.transitionTo()
die Router-Instanz mit den Requisiten aufruft, die Sie dem Link gegeben haben. Das sieht folgendermaßen aus:Bei einer regulären Verbindung wird letztendlich der
location.push()
von Ihnen verwendete Standorttyp aufgerufen, der die Details zum Einrichten des Verlaufs behandelt, sodass die Navigation mit den Schaltflächen "Zurück" und "Vorwärts" funktioniert. Anschließend wird zurückgerufenrouter.handleLocationChange()
, um dem Router mitzuteilen, dass der Übergang zu fortgesetzt werden kann der neue URL-Pfad.Der Router ruft dann seine eigene
router.dispatch()
Methode mit der neuen URL auf, die die Details zum Bestimmen festlegt, welche der konfigurierten Routen mit der URL übereinstimmen, und ruft dann alle für die übereinstimmenden Routen vorhandenen Übergangshooks auf. Sie können diese Übergangshooks in jedem Ihrer Routenhandler implementieren, um Maßnahmen zu ergreifen, wenn eine Route entfernt oder navigiert werden soll. Sie können den Übergang abbrechen, wenn die Dinge nicht Ihren Wünschen entsprechen.Wenn der Übergang nicht abgebrochen wurde, besteht der letzte Schritt darin, den Rückruf aufzurufen, den Sie
Router.run()
mit der Handlerkomponente der obersten Ebene und einem Statusobjekt mit allen Details der URL und den übereinstimmenden Routen erhalten haben. Die Handlerkomponente der obersten Ebene ist eigentlich dieRouter
Instanz selbst, die das Rendern des obersten Routenhandlers übernimmt, der abgeglichen wurde.Der obige Vorgang wird jedes Mal erneut ausgeführt, wenn Sie zu einer neuen URL auf dem Client navigieren.
Beispielprojekte
quelle
var routes = require('./routes')
Routenmodul? Ist es eine Liste von Routen? Ich habe Express-Router verwendet, aber dieses Beispiel hier auf SO scheint das einzige Beispiel für das Einrichten des serverseitigen Renderns mit React Router zu sein. Es wäre also gut, wenn es ein vollständiges Codebeispiel wärereact-router
Version veraltet . Bitte aktualisieren Sie es.Mit 1,0, Reaktion-Router ist abhängig von der Historie - Modul als peerDependency. Dieses Modul behandelt das Routing im Browser. Standardmäßig verwendet React-Router die HTML5-Verlaufs-API (
pushState
,replaceState
), Sie können sie jedoch für die Verwendung von Hash-basiertem Routing konfigurieren (siehe unten).Die Routenbehandlung erfolgt jetzt hinter den Kulissen, und ReactRouter sendet neue Requisiten an die Routenhandler, wenn sich die Route ändert. Der Router verfügt über einen neuen
onUpdate
Prop-Rückruf, wenn sich eine Route ändert. Dies ist<title>
beispielsweise nützlich für die Seitenaufrufverfolgung oder die Aktualisierung der Route .Client (HTML5-Routing)
Client (Hash-basiertes Routing)
Server
Auf dem Server können wir verwenden
ReactRouter.match
, dies wird aus dem Server-Rendering-Handbuch entnommenquelle