(Aktualisiert unten mit einem wenig mehr Info) HostingÄrger mit tiefen Routen auf einem Single-Seite-App auf Firebase
Wir haben eine reagieren-basierte Single-Seiten-Anwendung, die auf Firebase Hosting lebt. Wir haben bis zu diesem Punkt Hash-basiertes Routing verwendet (z. B. mysite.com/#/path/to/content). Wir haben React Router eingeführt, mit dem wir schönere URLs haben können (z. B. mysite.com/path/to/content), aber jetzt wird die App nicht geladen, wenn wir direkt zu einer tiefen Route navigieren. Details unten:
Die Verwendung von React Router erforderte die Verwendung von URL Rewriting in Firebase Hosting. Die Richtungen sind ziemlich einfach - es scheint, als ob alles, was Sie tun müssen, ist dies:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
... in der firebase.json Datei. In der Tat, unsere komplette firebase.json Datei ist wie folgt:
{
"firebase": "",
"public": "dist",
"rules": "rules.json",
"ignore": [
"firebase.json",
"**/.*",
"**/*.map",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
Nichts da zu kompliziert (wir firebase deploy -f in unserem Build-Skript zu tun, wenn Sie sich fragen, warum das firebase Argument leer ist). Die verlinkte zu rules.json Datei ist noch einfacher:
{
"rules":{
".write":"true",
".read":"true"
}
}
Wenn ich die App laden, indem Sie auf die Basis-URL aufrufen und die Navigation starten um, alles ist in Ordnung. Wenn ich direkt zu einer Route auf einer Ebene tief gehe (z. B. mysite.com/path), funktioniert das auch.
JEDOCH
Wenn ich auf einer tiefen Ebene zu einer Strecke gehe direkt, oder sogar zu einer Top-Level-Route mit einem Schrägstrich (z mysite.com/path/ oder mysite.com/path/to/content), dann ist die App nicht geladen.
Insbesondere, was passiert, ist die index.html Seite geladen wird, und dann geht Browser, um unsere webpack erstellte bundle.js Datei zu laden, die in index.html verwiesen wird, aber was Firebase für die JS-Datei kehrt Hosting ist der Inhalt des Index .html Datei. Also dann, wie zu erwarten, was wir in der Browser-Konsole zu sehen ist dieser Fehler:
Uncaught SyntaxError: Unexpected token <
... auf der Linie 1 der "Bundle-Datei". Wenn ich den Inhalt der Bundle-Datei in Chrome Entwickler-Tool zu sehen, Linie 1 der Bundle-Datei ist wörtlich so:
<!doctype html>
... die dann durch den Rest des HTML aus der index.html Datei folgte .
Es sieht so aus, als ob die Firebase URL Rewrite Regel sagt "Oh, Sie versuchen, eine JS-Datei zu referenzieren - ich sehe, dass ich den Inhalt von index.html für alles zurückgeben soll, also hier gehen". Aber das kann nicht immer der Fall sein, oder die Seite würde unter keinen Umständen funktionieren. Also warum funktioniert es, wenn ich am Site-Root anfange, aber bricht, wenn ich eine tiefe URL in die App einfüge? Ich habe keine Ahnung.
Wenn es hilft, ist hier, wie meine index.html Datei, die die Bundle-Datei verweist:
<script src="bundle.ce843ef7a2ae68e9e319.js"></script></body>
So ist es wie ein Problem mit Firebase Hosting scheint, aber ich konnte auch sehen, dass vielleicht kann ich nicht Router Reagieren Sie verstehen bei etwas Niveau, und so habe ich irgendwie mit dem clientseitigen Code so verschraubt, dass es den Server zwingt, das falsche Ding zurückzugeben.
Hier ist ich hoffe, es ist eine dumme Konfiguration, die wir vermissen. Jede Hilfe wird geschätzt!
Danke!
UPDATE: Ich habe unsere App so abgespeckt, dass sie nur "Hallo, Welt" zurückgibt, was alle React-basierten Dinge umgeht, einschließlich React Router, und das Problem bleibt bestehen, so dass ich nicht mehr daran denke mach mit React-Router, obwohl ich denke, dass es noch eine kleine Chance gibt, dass dies etwas mit React zu tun haben könnte.
Es war nützlich, danke Freund :) – Crema
Habe das gleiche Problem, aber hat nicht für mich gearbeitet –
Vielen Dank! Ich hatte das gleiche Problem, bedenken Sie, dass dies auch Auswirkungen auf die Referenzen der CSS-Dateien haben wird, Sie brauchen das/auf denen auch. – Lancelot