Mit dem React-Router können React-Apps verarbeitet werden /arbitrary/route
. Damit dies funktioniert, muss mein Server die React-App auf einer beliebigen Route senden.
Der Webpack-Entwicklungsserver verarbeitet jedoch keine beliebigen Endpunkte.
Hier gibt es eine Lösung mit einem zusätzlichen Express-Server. So lassen Sie den Webpack-Dev-Server Einstiegspunkte vom React-Router zu
Ich möchte jedoch keinen anderen Express-Server starten, um den Routenabgleich zu ermöglichen. Ich möchte dem Webpack-Entwickler nur mitteilen, dass er mit einer beliebigen URL übereinstimmt, und mir meine Reaktions-App senden. Bitte.
reactjs
ecmascript-6
webpack
react-router
eguneys
quelle
quelle
Antworten:
Ich fand die einfachste Lösung, um eine kleine Konfiguration einzuschließen:
Ich fand dies bei einem Besuch unter: PUSHSTATE WITH WEBPACK-DEV-SERVER .
quelle
--history-api-fallback
devServer: { port: 3000, historyApiFallback: true },
Die Option historyApiFallback in der offiziellen Dokumentation für webpack-dev-server erklärt deutlich, wie Sie beides erreichen können
Dies fällt einfach auf index.html zurück, wenn die Route nicht gefunden wird
oder
quelle
historyApiFallback
webpack-dev-server
der Nachfolgerwebpack-serve
, nicht umgekehrt, wie in stackoverflow.com/questions/31945763/… erwähnt .Das Hinzufügen eines öffentlichen Pfads zur Konfiguration hilft dem Webpack, echtes root (
/
) zu verstehen, selbst wenn Sie sich in Unterrouten befinden, z./article/uuid
Ändern Sie also Ihre Webpack-Konfiguration und fügen Sie Folgendes hinzu:
Ohne
publicPath
Ressourcen wird möglicherweise nicht richtig geladen, nur index.html.Auf Webpack getestet
4.6
Größerer Teil der Konfiguration (nur um ein besseres Bild zu haben):
quelle
historyApiFallback
Trick hat aus irgendeinem Grund nur für den letzten Teil der URL funktioniert./test
würde funktionieren,/test/test
würde aber 404 geben.historyApiFallback: {index: '/'}
oderhistoryApiFallback: true
(beide haben bei mir funktioniert)publicPath
war in meinem Fall auch die Einstellung von (Router 5.2) unerlässlich.Funktioniert bei mir so
Arbeiten an der Riot App
quelle
Meine Situation war etwas anders, da ich die eckige CLI mit Webpack und die Option 'Auswerfen' verwende, nachdem ich den Befehl ng eject ausgeführt habe. Ich habe das ausgeworfene npm-Skript für 'npm start' in der package.json geändert, um das Flag --history-api-fallback zu übergeben
quelle
Wenn Sie sich für die Verwendung entscheiden
webpack-dev-server
, sollten Sie sie nicht für die Bereitstellung Ihrer gesamten React-App verwenden. Sie sollten es verwenden, um Ihrebundle.js
Datei sowie die statischen Abhängigkeiten bereitzustellen. In diesem Fall müssten Sie zwei Server starten, einen für die Node.js-Einstiegspunkte, die tatsächlich Routen verarbeiten und den HTML-Code bereitstellen, und einen weiteren für das Bundle und die statischen Ressourcen.Wenn Sie wirklich einen einzelnen Server möchten, müssen Sie die Verwendung von beenden
webpack-dev-server
und die webpack-dev-Middleware in Ihrem App-Server verwenden. Es verarbeitet Bundles "on the fly" (ich denke, es unterstützt Caching und das Ersetzen heißer Module) und stellt sicher, dass Ihre Anrufebundle.js
immer auf dem neuesten Stand sind.quelle
Sie können
historyApiFallback
dieindex.html
Bereitstellung des Fehlers anstelle eines 404-Fehlers aktivieren , wenn an dieser Stelle keine andere Ressource gefunden wurde.Wenn Sie verschiedene Dateien für verschiedene URIs bereitstellen möchten, können Sie dieser Option grundlegende Umschreiberegeln hinzufügen. Das
index.html
wird noch für andere Wege bedient.quelle
Ich weiß, dass diese Frage für den Webpack-Dev-Server gilt, aber für jeden, der Webpack-Serve 2.0 verwendet. mit Webpack 4.16.5 ; Webpack-Serve ermöglicht Add-Ons. Sie müssen Folgendes erstellen
serve.config.js
:Referenz
Sie müssen das Entwicklungsskript von
webpack-serve
auf ändernnode serve.config.js
.quelle
Für mich hatte ich Punkte "." auf meinem
/orgs.csv
weg zB also musste ich das in mein webpack confg einfügen.quelle
Ich stimme den meisten bestehenden Antworten zu.
Eine wichtige Sache, die ich erwähnen wollte, ist, dass Sie wahrscheinlich eine zusätzliche Einstellung benötigen (insbesondere die Einstellung, wenn Sie beim manuellen Neuladen von Seiten auf tieferen Pfaden auf Probleme stoßen, bei denen der gesamte Abschnitt des Pfads bis auf den letzten beibehalten und der Name Ihrer
js
Bundle-Datei übernommen wirdpublicPath
).Zum Beispiel, wenn ich einen Pfad habe
/foo/bar
und meine Bundler-Datei aufgerufen wirdbundle.js
. Wenn ich versuche, die Seite manuell zu aktualisieren, wird die Meldung 404/foo/bundle.js
nicht gefunden. Interessanterweise werden beim erneuten Laden aus dem Pfad/foo
keine Probleme angezeigt (dies liegt daran, dass der Fallback dies behandelt).Versuchen Sie, das Folgende in Verbindung mit Ihrer vorhandenen
webpack
Konfiguration zu verwenden, um das Problem zu beheben.output.publicPath
ist das Schlüsselstück!quelle