Beispiel-Tutorial zur Zusammenarbeit des Servers mit BrowserRouter unter React-Router 4.0

React-Router spielt eine wichtige Rolle in React-Projekten als React-Framework-Routing-Lösung. In diesem Artikel wird hauptsächlich die detaillierte Erklärung der Zusammenarbeit des Servers mit BrowserRouter unter React-Router 4.0 vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

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 a7f2cf15f06fbef780c6b2609731da81-Komponente wird nicht mehr häufig als zugrunde liegende Routing-Konfigurationskomponente verwendet. Stattdessen gibt es vier verschiedene Routing-Komponenten:

6177ae8eed0322e277a7e6c21878d6d7, 4915f05e1fd45774514682b289f54a27, ab736354b76d127562077b87d19fcb68, 918422798e26d25f6fed3e9f4a3226eb

Die ab736354b76d127562077b87d19fcb68-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 918422798e26d25f6fed3e9f4a3226eb-Komponente erkennt an ihrem Namen, dass sie die Route niemals ändert, was beim Rendern auf der Serverseite sehr nützlich ist.

4915f05e1fd45774514682b289f54a27 Die Routing-Komponente, mit der wir am besten vertraut sind, muss hier nicht im Detail beschrieben werden, auf die ich bei der Verwendung des von React-Router empfohlenen 6177ae8eed0322e277a7e6c21878d6d7 gestoßen bin.

6177ae8eed0322e277a7e6c21878d6d7

6177ae8eed0322e277a7e6c21878d6d7 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 6177ae8eed0322e277a7e6c21878d6d7 beim Aktualisieren der Seite die Nachricht sendet aktuelle Route zum Server (da es sich um einen Pfadnamen handelt), 4915f05e1fd45774514682b289f54a27 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 e39972b58835f779f5cb270543abb76e verwendet werden.

Dafür muss der Server mit dem Frontend 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);
    }
  })
});

Hier gibt es unzählige Fallstricke. Nachdem ich im Internet nach Methoden gesucht hatte, wechselte ich zu Nginx und verwendete das Feld try_files, um zum Eingangs-HTML zu gelangen, aber danach Umleitung, die von Webpack gepackte js-Datei wurde 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.

Verwandte Empfehlungen:

Eine kurze Diskussion über die Verwendung von React-Router HashRouter und BrowserRouter

React-Router BrowserHistory Aktualisieren So lösen Sie das Problem mit Seite 404

Drei Arten von Vue-Router, um das Springen zwischen Komponenten zu realisieren

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur Zusammenarbeit des Servers mit BrowserRouter unter React-Router 4.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!