Wenn Ihre React-App lokal funktioniert, nach der Bereitstellung jedoch die Meldung „requested URL was not found“ erscheint, hilft Ihnen dieser Leitfaden, das Problem durch Einrichten der korrekten `.htaccess`-Datei für die Routen Ihrer Anwendung zu beheben.
---
Dieses Video basiert auf der Frage https://stackoverflow.com/q/62335443/ gestellt von dem Nutzer 'Adam Norton' ( https://stackoverflow.com/u/11922734/ ) sowie auf der Antwort https://stackoverflow.com/a/62347244/ bereitgestellt von dem Nutzer 'Adam Norton' ( https://stackoverflow.com/u/11922734/ ) auf der Website 'Stack Overflow'. Vielen Dank an diese großartigen Nutzer und die Stackexchange-Community für ihre Beiträge.
Besuchen Sie diese Links, um den Originalinhalt und weitere Details zu sehen, z. B. alternative Lösungen, aktuelle Entwicklungen zum Thema, Kommentare, Versionsverlauf usw. Der ursprüngliche Titel der Frage lautete beispielsweise: React Links - "requested URL was not found on this server" after being deployed
Außerdem steht der Inhalt (außer Musik) unter der Lizenz CC BY-SA https://meta.stackexchange.com/help/l...
Der ursprüngliche Fragenbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ), und der ursprüngliche Antwortbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ).
Falls Ihnen irgendetwas auffällt oder Unstimmigkeiten bestehen, schreiben Sie mir bitte an vlogize [AT] gmail [DOT] com.
---
Ihre React-Anwendung funktioniert lokal, aber nicht nach der Bereitstellung?
Es ist ein häufiges Szenario für Entwickler: Sie erstellen eine funktionsfähige React-App, die auf Ihrem lokalen Rechner perfekt läuft, doch nach der Bereitstellung führt das Navigieren durch die App zu einer frustrierenden Fehlermeldung, die lautet: „requested URL was not found on this server“. Das führt oft zu Verwirrung und Frustration, während Sie versuchen herauszufinden, was schiefgelaufen ist.
Dieses Problem entsteht in der Regel durch Routing-Konfiguration und Servereinstellungen. In diesem Beitrag werden wir eine spezielle Lösung betrachten, die Ihr Problem höchstwahrscheinlich beheben kann: die .htaccess-Datei.
Das Problem verstehen
Wenn Sie eine React-Anwendung bereitstellen, insbesondere eine, die React Router für die clientseitige Navigation verwendet, ist die App darauf angewiesen, dass der Server ihre Routen behandelt. Hier eine Zusammenfassung der Symptome:
Lokal funktioniert das Navigieren über Buttons oder Links fehlerfrei, da der Browser die Routen kennt.
Nach der Bereitstellung erhalten Sie beim Aktualisieren der Seite oder beim direkten Zugriff auf eine Route (z. B. /services) einen 404-Fehler.
Der zugrundeliegende Grund für diesen Fehler liegt darin, wie Server Pfadanfragen verarbeiten. Sie suchen typischerweise nach Dateien und Ordnern, die der URL entsprechen – was bei Single-Page-Anwendungen (SPAs) wie denen mit React nicht der Fall ist.
Die Lösung: Erstellen einer .htaccess-Datei
Die gute Nachricht ist, dass die Lösung relativ einfach ist. Wenn Sie einen Apache-Server verwenden, können Sie eine .htaccess-Datei anlegen, die dem Server mitteilt, wie Anfragen für die Routen Ihrer React-Anwendung zu behandeln sind.
Schritte zum Erstellen und Konfigurieren der .htaccess-Datei
Erstellen Sie die .htaccess-Datei
Öffnen Sie Ihren Texteditor und erstellen Sie eine neue Datei mit dem Namen .htaccess.
Fügen Sie Rewrite-Regeln hinzu
Kopieren Sie den folgenden Code und fügen Sie ihn in Ihre .htaccess-Datei ein:
[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]
Erklärung des Codes:
RewriteEngine On: Aktiviert die Rewrite-Engine.
RewriteBase /: Setzt die Basis-URL.
RewriteRule ^index.html$ - [L]: Wenn die Anfrage index.html betrifft, wird nichts geändert und das Umschreiben gestoppt.
Die folgenden Zeilen prüfen, ob die angeforderte Datei oder das Verzeichnis nicht existiert. Falls nicht, erfolgt eine Weiterleitung zu index.html, damit React Router das Routing intern übernehmen kann.
Laden Sie die Datei hoch
Platzieren Sie die .htaccess-Datei im Root-Verzeichnis Ihrer Build-Dateien auf dem Server.
Testen Ihrer Anwendung
Nachdem Sie die .htaccess-Datei hochgeladen haben, navigieren Sie innerhalb Ihrer Anwendung zu verschiedenen Routen. Sie sollten feststellen, dass alle Links und Seitenaktualisierungen korrekt funktionieren und die gefürchtete 404-Fehlermeldung nicht mehr auftritt!
Fazit
Die Bereitstellung einer React-Anwendung kann manchmal knifflig sein, vor allem beim Routing. Doch durch die richtige Serverkonfiguration mittels einer .htaccess-Datei können Sie häufige Probleme wie den Fehler „requested URL was not found“ umgehen. Diese kleine Datei spielt eine wichtige Rolle dabei, sicherzustellen, dass Ihre React-App reibungslos im Produktivbetrieb läuft.
Bei Fragen oder falls Sie weitere Unterstützung zu diesem Thema benötigen, können Sie sich gerne melden!
Информация по комментариям в разработке