Wie BrowserRouter mit dem React-Router-Server zusammenarbeitet

In diesem Artikel wird hauptsächlich die detaillierte Erklärung der Zusammenarbeit des Servers mit BrowserRouter unter React-Router 4.0 vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

React-Router spielt eine wichtige Rolle in React-Projekten als React-Framework-Routing-Lösung.

In der React-Router-Version 4.0 wurde die API im Vergleich zur Vorgängerversion stark geändert. Die in 2.0 und 3.0 häufig verwendete -Komponente wird nicht mehr häufig als zugrunde liegende Routing-Konfigurationskomponente verwendet. Stattdessen gibt es vier verschiedene Routing-Komponenten:

, , ,

Die -Komponente befindet sich im Speicher Die „URL“-Informationen verändern die Adressleiste des Browsers nicht und werden häufig in Nicht-Browser-Umgebungen wie React Native oder Testumgebungen verwendet.

Die -Komponente erkennt an ihrem Namen, dass sie die Route niemals ändert, was beim Rendern auf der Serverseite sehr nützlich ist.

Es besteht keine Notwendigkeit, näher auf die Routing-Komponente einzugehen, mit der wir am besten vertraut sind. Router.

können beide Front-End-Routing-Funktionen implementieren. Der Unterschied besteht darin, dass ersteres auf dem Pfadnamensegment von rul und dem basiert Letzteres basiert auf dem Hash-Segment.

Ersteres: http://127.0.0.1:3000/article/num1

Letzteres: http://127.0.0.1:3000/#/article/num1 (Dies ist nicht der Fall unbedingt der Fall, aber # ist unverzichtbar)

Das direkte Problem, das durch diesen Unterschied verursacht wird, besteht darin, dass beim Aktualisieren der Seite die Nachricht sendet aktuelle Route zum Server (da es sich um einen Pfadnamen handelt), jedoch nicht (da es sich um ein Hash-Segment handelt).

Wir möchten auf keinen Fall, dass Frontend-Routen an das Backend gesendet werden.

In der Dokumentation von React-Router 4.0 gibt es diese Passage:

Hinweis: Die Verwendung von Hash zum Aufzeichnen des Navigationsverlaufs unterstützt location.key und location.state nicht. In früheren Versionen haben wir Ausgleichselemente für dieses Verhalten bereitgestellt, es gab jedoch immer noch einige Probleme, die wir nicht lösen konnten. Jeglicher Code oder Plugins, die auf diesem Verhalten basieren, funktionieren nicht ordnungsgemäß. Da diese Technologie nur für die Unterstützung älterer Browser konzipiert ist, kann stattdessen verwendet werden.

Dafür muss der Server mit dem Front-End zusammenarbeiten, um einige einfache Änderungen vorzunehmen.

Die Idee der Änderung besteht darin, die Eintrags-HTML-Datei (mein Hintergrund ist nodejs) neu zu laden, wenn die angeforderte URL nicht funktionsfähig ist, sondern eine Front-End-Route.

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  //判断是主动导向404页面，还是传来的前端路由。
　　 //如果是前端路由则如下处理

  fs.readFile(__dirname + '/public/dist/index.html', function(err, data){
    if(err){
      console.log(err);
      res.send('后台错误');
    } else {
      res.writeHead(200, {
        'Content-type': 'text/html',
        'Connection':'keep-alive'
      });
      res.end(data);
    }
  })
});

Nachdem ich im Internet nach Methoden gesucht hatte, wechselte ich zu nginx und verwendete das Feld try_files, um zum Eintrag html zu gelangen. Nach der Umleitung wurde jedoch die von Webpack gepackte js-Datei verwendet nicht ausgeführt.

Bei der Überprüfung von Firebug habe ich festgestellt, dass im Antwortheader dieser Aktualisierung „Connection“: „keep-alive“ festgelegt ist.

Ich denke, das Problem sollte hier liegen. Wechseln Sie zu nodejs und Die Verwendung von 200 Status zur Übereinstimmung mit Keep-Alive hat das Problem wirklich gelöst.

Das Aktualisieren der Seite unter React-Router 4.0 Multi-Level-Routing führt nicht mehr zu 404, sondern speichert den Front-End-Status.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Probleme mit domänenübergreifenden Ressourcenfehlern von React Native

Installieren der neuesten Version von npm in nodejs (ausführliches Tutorial)

So implementieren Sie die Entprellung der Funktion in js (ausführliches Tutorial)

So markieren Sie die Datensatz-Scroll-Position im Vue-Scroller

Was soll ich tun, wenn das WeChat-Applet die Prüfung nicht besteht?

So verwenden Sie den Swiper, um gleitende Inhalte zu ändern (ausführliche Anleitung)

So implementieren Sie eine Hintergrundvideo-Anmeldeseite mit Vue.js 2.0

Das obige ist der detaillierte Inhalt vonWie BrowserRouter mit dem React-Router-Server zusammenarbeitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!