(unten mit ein wenig mehr Informationen aktualisiert)
Wir haben eine reaktionsbasierte einseitige Web-App, die auf Firebase Hosting basiert. Wir haben bis zu diesem Punkt Hash-basiertes Routing verwendet (z. B. mysite.com/#/path/to/content ). Wir haben den 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 Anweisungen sind ziemlich einfach - es scheint, als ob alles, was Sie tun müssen, ist:
%Vor% ... in der Datei firebase.json . In der Tat ist unsere komplette firebase.json -Datei wie folgt:
Nichts zu kompliziert dort (wir machen firebase deploy -f in unserem Build-Skript, wenn Sie sich fragen, warum das Argument firebase leer ist). Die Linked-to rules.json -Datei ist noch einfacher:
Wenn ich die App lade, indem ich zur Basis-URL gehe und herum navigiere, ist alles in Ordnung. Wenn ich direkt auf eine Ebene tiefer gehe (z. B. mysite.com/path ), funktioniert das auch.
JEDOCH
Wenn ich direkt zu einer Route auf einer tiefen Ebene oder sogar zu einer Route der obersten Ebene mit einem nachgestellten Schrägstrich gehe (z. B. mysite.com/path/ oder mysite.com/path/to/content ), wird die App nicht geladen.
Insbesondere wird die Seite index.html geladen, und dann lädt der Browser unsere von webpack erstellte Datei bundle.js, die in index.html referenziert wird, aber was Firebase Hosting für diese JS-Datei zurückgibt, ist Der Inhalt der Datei index.html . Wie zu erwarten ist, ist dieser Fehler in der Browser-Konsole:
Uncaught SyntaxError: Unexpected token <
... in Zeile 1 der "Bundle-Datei". Wenn ich den Inhalt der Bundle-Datei in den Dev Tools von Chrome anschaue, lautet Zeile 1 der Bundle-Datei wörtlich:
<!doctype html>
... gefolgt vom Rest des HTML-Codes aus der index.html -Datei.
Es sieht so aus, als ob die Firebase-URL-Rewrite-Regel sagt: "Oh, du versuchst eine JS-Datei zu referenzieren - ich sehe, dass ich den Inhalt von index.html für alles zurückgeben soll, also hier du gehst". 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 auf die Bundle-Datei verweist:
Es scheint also ein Problem mit dem Firebase-Hosting zu sein, aber ich könnte auch sehen, dass ich React Router vielleicht auf irgendeiner Ebene nicht verstehe, und so habe ich es irgendwie mit dem clientseitigen Code so vermasselt dass es den Server zwingt, das falsche Ding zurückzugeben.
Ich hoffe, es ist eine dumme Konfiguration, die wir vermissen. Jede Hilfe wird geschätzt!
Danke!
UPDATE: Ich habe unsere App entfernt, so 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 denke, dass das etwas zu tun hat mit React-Router, obwohl ich denke, es gibt immer noch eine kleine Chance, dass dies etwas mit React zu tun haben könnte.
Ich habe von Firebase Hosting gehört. Offensichtlich brauchte die referenzierte Datei bundle.js in unserer Indexdatei einen Schrägstrich davor, um es zu einem absoluten Pfad zu machen. Also das:
%Vor%... statt dessen:
%Vor%Falls jemand anders diesen dummen Fehler macht, hoffe ich, dass das nützlich ist.
Tags und Links firebase reactjs webpack react-router firebase-hosting