Ich verwende React-Router und es funktioniert gut, wenn ich auf Link-Schaltflächen klicke, aber wenn ich meine Webseite aktualisiere, wird nicht geladen, was ich will.
Zum Beispiel bin ich dabei localhost/joblist
und alles ist in Ordnung, weil ich hier angekommen bin und einen Link gedrückt habe. Aber wenn ich die Webseite aktualisiere, bekomme ich:
Cannot GET /joblist
Standardmäßig hat es so nicht funktioniert. Anfangs hatte ich meine URL als localhost/#/
und localhost/#/joblist
und sie funktionierten einwandfrei. Aber ich mag diese Art von URL nicht, also habe #
ich versucht, sie zu löschen :
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
Dieses Problem tritt nicht auf localhost/
, dieses gibt immer zurück, was ich will.
BEARBEITEN: Diese App ist einseitig, /joblist
muss also keinen Server fragen.
EDIT2: Mein gesamter Router.
var routes = (
<Route name="app" path="/" handler={App}>
<Route name="joblist" path="/joblist" handler={JobList}/>
<DefaultRoute handler={Dashboard}/>
<NotFoundRoute handler={NotFound}/>
</Route>
);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
quelle
#
Symbol gelöscht ? Vielen Dank!index.html
. Dies stellt sicher, dassindex.html
getroffen wird, egal was passiert.Antworten:
Angesichts der Kommentare zur akzeptierten Antwort und des allgemeinen Charakters dieser Frage („funktioniert nicht“) dachte ich, dass dies ein guter Ort für einige allgemeine Erklärungen zu den hier behandelten Themen sein könnte. Diese Antwort ist also als Hintergrundinformation / Ausarbeitung des spezifischen Anwendungsfalls des OP gedacht. Bitte bei mir tragen.
Serverseitig gegen Clientseite
Das Erste, was man darüber verstehen sollte, ist, dass es jetzt zwei Stellen gibt, an denen die URL interpretiert wird, während es früher nur eine gab. In der Vergangenheit, als das Leben einfach war, hat ein Benutzer eine Anfrage
http://example.com/about
an den Server gesendet, der den Pfadteil der URL überprüft, festgestellt hat, dass der Benutzer die Info-Seite angefordert hat, und diese Seite dann zurückgesendet.Beim clientseitigen Routing, das React-Router bietet, sind die Dinge weniger einfach. Zunächst ist auf dem Client noch kein JS-Code geladen. Die allererste Anfrage wird also immer an den Server gerichtet. Daraufhin wird eine Seite zurückgegeben, die die zum Laden von React und React Router usw. erforderlichen Skript-Tags enthält. Erst wenn diese Skripte geladen wurden, wird Phase 2 gestartet. Wenn der Benutzer in Phase 2 beispielsweise auf den Navigationslink "Über uns" klickt, wird die URL nur lokal in
http://example.com/about
(ermöglicht durch die Verlaufs-API ) geändert , es wird jedoch keine Anforderung an den Server gestellt. Stattdessen erledigt React Router seine Aufgabe auf der Clientseite, bestimmt, welche React-Ansicht gerendert werden soll, und rendert sie. Angenommen, Ihre About-Seite muss keine REST-Aufrufe ausführen, ist dies bereits geschehen. Sie sind von "Home" zu "Über uns" gewechselt, ohne dass eine Serveranforderung ausgelöst wurde.Wenn Sie also auf einen Link klicken, wird Javascript ausgeführt, das die URL in der Adressleiste manipuliert, ohne eine Seitenaktualisierung zu verursachen , was wiederum dazu führt, dass React Router einen Seitenübergang auf der Clientseite durchführt .
Überlegen Sie nun, was passiert, wenn Sie die URL kopieren, in die Adressleiste einfügen und per E-Mail an einen Freund senden. Ihr Freund hat Ihre Website noch nicht geladen. Mit anderen Worten, sie befindet sich noch in Phase 1 . Auf ihrem Computer läuft noch kein React Router. Ihr Browser wird also eine Serveranfrage an stellen
http://example.com/about
.Und hier beginnt Ihr Ärger. Bis jetzt konnten Sie nur einen statischen HTML-Code auf der Webroot Ihres Servers platzieren. Dies würde jedoch zu
404
Fehlern für alle anderen URLs führen, wenn dies vom Server angefordert wird . Dieselben URLs funktionieren auf der Clientseite einwandfrei , da dort React Router das Routing für Sie ausführt. Auf der Serverseite schlagen sie jedoch fehl, es sei denn, Sie lassen Ihren Server sie verstehen.Kombination von server- und clientseitigem Routing
Wenn die
http://example.com/about
URL sowohl auf der Server- als auch auf der Clientseite funktionieren soll, müssen Sie Routen sowohl auf der Server- als auch auf der Clientseite einrichten. Macht Sinn, oder?Und hier beginnen Ihre Entscheidungen. Die Lösungen reichen von der Umgehung des Problems über eine Catch-All-Route, die den Bootstrap-HTML-Code zurückgibt, bis hin zum isomorphen Ansatz, bei dem sowohl der Server als auch der Client denselben JS-Code ausführen.
.
Das Problem insgesamt umgehen: Hash-Verlauf
Mit Hash-Verlauf anstelle von Browser-Verlauf sieht Ihre URL für die About-Seite ungefähr so aus:
http://example.com/#/about
Der Teil nach dem#
Symbol hash ( ) wird nicht an den Server gesendet. Der Server siehthttp://example.com/
und sendet die Indexseite also nur wie erwartet. React-Router nimmt das#/about
Teil auf und zeigt die richtige Seite an.Nachteile :
.
Allheilmittel
Mit diesem Ansatz haben Sie verwenden Browser - Historie, aber nur eine allumfassende auf dem Server einrichten, sendet
/*
anindex.html
, effektiv Sie viel die gleiche Situation wie mit Hash Geschichte zu geben. Sie haben jedoch saubere URLs und können dieses Schema später verbessern, ohne alle Favoriten Ihres Benutzers ungültig machen zu müssen.Nachteile :
.
Hybrid
Beim hybriden Ansatz erweitern Sie das Catch-All-Szenario, indem Sie bestimmte Skripte für bestimmte Routen hinzufügen. Sie können einige einfache PHP-Skripte erstellen, um die wichtigsten Seiten Ihrer Website mit eingeschlossenem Inhalt zurückzugeben, damit Googlebot zumindest sehen kann, was sich auf Ihrer Seite befindet.
Nachteile :
.
Isomorph
Was ist, wenn wir Node JS als Server verwenden, damit wir an beiden Enden denselben JS-Code ausführen können ? Jetzt haben wir alle unsere Routen in einer einzigen React-Router-Konfiguration definiert und müssen unseren Rendering-Code nicht mehr duplizieren. Dies ist sozusagen 'der heilige Gral'. Der Server sendet genau das gleiche Markup, das wir erhalten würden, wenn der Seitenübergang auf dem Client stattgefunden hätte. Diese Lösung ist in Bezug auf SEO optimal.
Nachteile :
window
auf der Serverseite usw.).
Welches soll ich verwenden?
Wählen Sie die aus, mit der Sie durchkommen können. Persönlich denke ich, dass das Allheilmittel einfach genug ist, um es einzurichten, also wäre das mein Minimum. Mit diesem Setup können Sie die Dinge im Laufe der Zeit verbessern. Wenn Sie Node JS bereits als Serverplattform verwenden, würde ich auf jeden Fall eine isomorphe App untersuchen. Ja, es ist zunächst schwierig, aber sobald Sie den Dreh raus haben, ist es tatsächlich eine sehr elegante Lösung für das Problem.
Für mich wäre das also der entscheidende Faktor. Wenn mein Server auf Node JS läuft, würde ich isomorph werden. Andernfalls würde ich mich für die Catch-All-Lösung entscheiden und sie im Laufe der Zeit erweitern und die SEO-Anforderungen erfordern.
Wenn Sie mehr über isomorphes (auch als "universell" bezeichnetes) Rendering mit React erfahren möchten, gibt es einige gute Tutorials zu diesem Thema:
Um Ihnen den Einstieg zu erleichtern, empfehle ich Ihnen, sich einige Starter-Kits anzusehen. Wählen Sie eine aus, die Ihren Auswahlmöglichkeiten für den Technologie-Stack entspricht (denken Sie daran, React ist nur das V in MVC, Sie benötigen mehr Material, um eine vollständige App zu erstellen). Schauen Sie sich zunächst die von Facebook selbst veröffentlichte an:
Oder wählen Sie eine der vielen von der Community. Es gibt jetzt eine schöne Seite, die versucht, alle zu indizieren:
Ich habe mit diesen angefangen:
Derzeit verwende ich eine selbstgebraute Version des universellen Renderings, die von den beiden oben genannten Starter-Kits inspiriert wurde, aber jetzt veraltet ist.
Viel Glück bei deiner Suche!
quelle
/*
und lassen sie mit Ihrer HTML-Seite antworten. Das Schwierige dabei ist, sicherzustellen, dass Sie mit dieser Route keine Anforderungen für die .js- und .css-Dateien abfangen.createMemoryHistory is not a function
Fehler. Stört es dich? stackoverflow.com/questions/45002573/…Die Antworten hier sind alle äußerst hilfreich. Für mich hat es funktioniert, meinen Webpack-Server so zu konfigurieren, dass er die Routen erwartet.
Der historyApiFallback hat dieses Problem für mich behoben. Jetzt funktioniert das Routing korrekt und ich kann die Seite aktualisieren oder die URL direkt eingeben. Sie müssen sich keine Gedanken über Problemumgehungen auf Ihrem Knotenserver machen. Diese Antwort funktioniert natürlich nur, wenn Sie Webpack verwenden.
BEARBEITEN: Siehe meine Antwort hier für einen detaillierteren Grund, warum dies notwendig ist: https://stackoverflow.com/a/37622953/5217568
quelle
historyApiFallback
ist ausreichend. Wie bei allen anderen Optionen kann sie auch über die CLI mit dem Flag festgelegt werden--history-api-fallback
.Sie können Ihre
.htaccess
Datei ändern und Folgendes einfügen:Ich verwende
react: "^16.12.0"
undreact-router: "^5.1.2"
Diese Methode ist das Allheilmittel und wahrscheinlich der einfachste Weg, um Ihnen den Einstieg zu erleichtern.quelle
Für Benutzer von React Router V4 :
Wenn Sie versuchen, dieses Problem mithilfe der in anderen Antworten erwähnten Hash-Verlaufstechnik zu lösen, beachten Sie dies
funktioniert nicht in V4, bitte verwenden Sie
HashRouter
stattdessen:Referenz: HashRouter
quelle
Der Router kann auf zwei verschiedene Arten aufgerufen werden, je nachdem, ob die Navigation auf dem Client oder auf dem Server erfolgt. Sie haben es für den clientseitigen Betrieb konfiguriert. Der Schlüsselparameter ist der zweite Parameter der Ausführungsmethode , der Speicherort.
Wenn Sie die React Router Link-Komponente verwenden, blockiert sie die Browsernavigation und ruft TransitionTo auf, um eine clientseitige Navigation durchzuführen. Sie verwenden HistoryLocation und verwenden daher die HTML5-Verlaufs-API, um die Illusion der Navigation durch Simulieren der neuen URL in der Adressleiste zu vervollständigen. Wenn Sie ältere Browser verwenden, funktioniert dies nicht. Sie müssten die HashLocation-Komponente verwenden.
Wenn Sie auf Aktualisieren klicken, umgehen Sie den gesamten React- und React Router-Code. Der Server erhält die Anfrage für
/joblist
und muss etwas zurückgeben. Auf dem Server müssen Sie den angeforderten Pfad an dierun
Methode übergeben, damit sie die richtige Ansicht wiedergibt. Sie können dieselbe Routenkarte verwenden, benötigen jedoch wahrscheinlich einen anderen AnrufRouter.run
. Wie Charles betont, können Sie dazu das Umschreiben von URLs verwenden. Eine andere Option besteht darin, einen node.js-Server zu verwenden, um alle Anforderungen zu verarbeiten und den Pfadwert als Standortargument zu übergeben.In Express könnte es beispielsweise so aussehen:
Beachten Sie, dass der Anforderungspfad an übergeben wird
run
. Dazu benötigen Sie eine serverseitige Ansichts-Engine, an die Sie den gerenderten HTML-Code übergeben können. Es gibt eine Reihe weiterer Überlegungen zur VerwendungrenderToString
und Ausführung von React auf dem Server. Sobald die Seite auf dem Server gerendert ist und Ihre App auf dem Client geladen wird, wird sie erneut gerendert und aktualisiert den serverseitig gerenderten HTML-Code nach Bedarf.quelle
Fügen Sie in Ihrer index.html
head
Folgendes hinzu:Verwenden Sie dann diesen Befehl, wenn Sie mit dem Webpack-Entwicklungsserver ausgeführt werden.
--history-api-fallback
ist der wichtige Teilquelle
/
dannHashRouter
nicht funktioniert (wenn Sie Hash-Routing verwenden)Ich habe gerade die Create-React-App verwendet, um eine Website zu erstellen, und das gleiche Problem wurde hier vorgestellt. Ich benutze
BrowserRouting
aus demreact-router-dom
Paket. Ich laufe auf einem Nginx-Server und habe das Problem gelöst, indem ich Folgendes hinzugefügt habe/etc/nginx/yourconfig.conf
.htaccess
Dies entspricht dem Hinzufügen des Folgenden zu dem Fall, dass Sie Appache ausführenDies scheint auch die vorgeschlagene Lösung von Facebook selbst und finden Sie hier
quelle
Dies kann Ihr Problem lösen
Ich hatte auch das gleiche Problem in der ReactJS-Anwendung im Produktionsmodus. Hier ist die 2 Lösung für das Problem.
1.Ändern Sie den Routing-Verlauf in "hashHistory" anstelle von browserHistory anstelle von
Erstellen Sie nun die App mit dem Befehl
Legen Sie dann den Build-Ordner in Ihren var / www / -Ordner. Jetzt funktioniert die Anwendung einwandfrei, und in jeder URL wird ein # -Tag hinzugefügt. mögen
localhost / # / home localhost / # / aboutus
Lösung 2: Ohne # -Tag mit browserHistory,
Setzen Sie Ihren Verlauf = {browserHistory} in Ihrem Router. Erstellen Sie ihn jetzt mit sudo npm run build.
Sie müssen die "conf" -Datei erstellen, um die nicht gefundene 404-Seite zu lösen. Die conf-Datei sollte folgendermaßen aussehen.
Öffnen Sie Ihr Terminal und geben Sie die folgenden Befehle ein
cd / etc / apache2 / sites-available ls nano sample.conf Fügen Sie den folgenden Inhalt hinzu.
Jetzt müssen Sie die Datei sample.conf mit dem folgenden Befehl aktivieren
Anschließend werden Sie aufgefordert, den Apache-Server mithilfe des sudo-Dienstes apache2 neu zu laden oder neu zu starten
Öffnen Sie dann Ihren Ordner localhost / build und fügen Sie die .htaccess-Datei mit dem folgenden Inhalt hinzu.
Jetzt funktioniert die App normal.
Hinweis: Ändern Sie die IP-Adresse 0.0.0.0 in Ihre lokale IP-Adresse.
Wenn Sie diesbezüglich Zweifel haben, können Sie gerne einen Kommentar abgeben.
Ich hoffe es ist hilfreich für andere.
quelle
"react-router-dom": "^5.1.2"
? Ich verwende<BrowserRouter>
Wenn Sie eine Reaktions-App über AWS Static S3 Hosting & CloudFront hosten
Dieses Problem trat auf, als CloudFront mit einer 403 Access Denied-Nachricht antwortete, weil erwartet wurde, dass / some / other / path in meinem S3-Ordner vorhanden ist, dieser Pfad jedoch nur intern im React-Routing mit dem React-Router vorhanden ist.
Die Lösung bestand darin, eine Regel für Verteilungsfehlerseiten einzurichten. Gehen Sie zu den CloudFront-Einstellungen und wählen Sie Ihre Distribution aus. Gehen Sie als nächstes zur Registerkarte "Fehlerseiten". Klicken Sie auf "Benutzerdefinierte Fehlerantwort erstellen" und fügen Sie einen Eintrag für 403 hinzu, da dies der Fehlerstatuscode ist, den wir erhalten. Setzen Sie den Pfad der Antwortseite auf /index.html und den Statuscode auf 200. Das Endergebnis überrascht mich mit seiner Einfachheit. Die Indexseite wird bereitgestellt, die URL bleibt jedoch im Browser erhalten. Sobald die Reaktions-App geladen ist, erkennt sie den URL-Pfad und navigiert zur gewünschten Route.
Fehlerseiten 403 Regel
quelle
Der Webpack Dev Server verfügt über eine Option, um dies zu aktivieren. Öffnen
package.json
und hinzufügen--history-api-fallback
. Diese Lösung hat bei mir funktioniert.React-Router-Tutorial
quelle
webpack-dev-server
aber wie behebe ich das für den Produktions-Build?Wenn Sie Ihre Reaktions-App auf IIS hosten, fügen Sie einfach eine web.config-Datei hinzu, die Folgendes enthält:
Dadurch wird der IIS-Server angewiesen, die Hauptseite anstelle des 404-Fehlers an den Client zurückzugeben, ohne dass der Hash-Verlauf verwendet werden muss.
quelle
Fügen Sie dies hinzu zu
webpack.config.js
:quelle
Produktionsstapel: Reagieren, Reagieren Router v4, BrowswerRouter, Express, Nginx
1) User BrowserRouter für hübsche URLs
2) Fügen Sie index.html allen unbekannten Anforderungen hinzu, indem Sie verwenden
/*
3) Webpack mit bündeln
webpack -p
4) laufen
nodemon server.js
odernode server.js
BEARBEITEN: Möglicherweise möchten Sie nginx dies im Serverblock behandeln lassen und Schritt 2 ignorieren:
quelle
import path from 'path
oderconst path = require('path')
/*
) hat gerade meinen Tag gerettet. Vielen Dank! :)Wenn Sie die Create React App verwenden:
Es gibt jedoch einen guten Überblick über dieses Problem mit Lösungen für viele wichtige Hosting-Plattformen, die Sie HIER auf der Seite "React App erstellen" finden . Zum Beispiel verwende ich React Router v4 und Netlify für meinen Frontend-Code. Alles, was es brauchte, war 1 Datei zu meinem öffentlichen Ordner ("_redirects") und eine Codezeile in dieser Datei hinzuzufügen:
Jetzt rendert meine Website Pfade wie mysite.com/pricing ordnungsgemäß, wenn sie in den Browser eingegeben wird oder wenn jemand auf Aktualisieren klickt.
quelle
Versuchen Sie, die Datei ".htaccess" mit dem folgenden Code im öffentlichen Ordner hinzuzufügen.
quelle
Wenn Sie einen Fallback auf Ihre index.html haben, stellen Sie sicher, dass Sie in Ihrer index.html-Datei Folgendes haben:
Dies kann von Projekt zu Projekt unterschiedlich sein.
quelle
head
: <base href = "/">Wenn Sie firebase verwenden, müssen Sie lediglich sicherstellen, dass Ihre Datei firebase.json im Stammverzeichnis Ihrer App (im Hosting-Bereich) eine Eigenschaft zum Umschreiben enthält.
Zum Beispiel:
Ich hoffe, dies erspart jemand anderem einen Haufen Frustration und Zeitverschwendung.
Viel Spaß beim Codieren ...
Weiterführende Literatur zu diesem Thema:
https://firebase.google.com/docs/hosting/full-config#rewrites
Firebase-CLI: "Als einseitige App konfigurieren (alle URLs in /index.html umschreiben)"
quelle
Ich habe die Lösung für mein SPA mit React Router (Apache) gefunden. Fügen Sie einfach .htaccess hinzu
Quelle: https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042
quelle
Ich verwende noch kein serverseitiges Rendering, aber ich habe das gleiche Problem wie das OP, bei dem Link die meiste Zeit gut zu funktionieren schien, aber fehlgeschlagen ist, als ich einen Parameter hatte. Ich werde meine Lösung hier dokumentieren, um zu sehen, ob sie jemandem hilft.
Mein Haupt-JSX enthält Folgendes:
Dies funktioniert gut für den ersten passenden Link, aber wenn sich die: id ändert
<Link>
Ausdrücken , die auf der Detailseite des Modells verschachtelt sind, ändert sich die URL in der Browserleiste, aber der Inhalt der Seite wurde anfangs nicht geändert, um das verknüpfte Modell widerzuspiegeln.Das Problem war, dass ich das verwendet hatte
props.params.id
, um das Modell einzurichtencomponentDidMount
. Die Komponente wird nur einmal montiert. Dies bedeutet, dass das erste Modell auf der Seite haftet und die nachfolgenden Links die Requisiten ändern, die Seite jedoch unverändert bleibt.Das Setzen des Modells in den Komponentenstatus in
componentDidMount
und incomponentWillReceiveProps
(wo es auf den nächsten Requisiten basiert) löst das Problem und der Seiteninhalt ändert sich, um das gewünschte Modell widerzuspiegeln.quelle
props
iso hat ) zu verwenden,componentDidMount
wenn Sie jemals versuchen möchten, serverseitig zu rendern. DenncomponentDidMount
wird nur im Browser aufgerufen. Der Zweck besteht darin, Dinge mit dem DOM zu tun, z. B. Ereignis-Listener anbody
usw. anzuhängen, die Sie nicht ausführen könnenrender
.Dieses Thema ist etwas alt und gelöst, aber ich möchte Ihnen eine einfache, klare und bessere Lösung vorschlagen. Es funktioniert, wenn Sie einen Webserver verwenden.
Jeder Webserver kann den Benutzer im Fall von http 404 auf eine Fehlerseite umleiten. Um dieses Problem zu beheben, müssen Sie den Benutzer auf die Indexseite umleiten.
Wenn Sie einen Java-Basisserver (Tomcat oder einen Java-Anwendungsserver) verwenden, kann die Lösung wie folgt aussehen:
web.xml:
Beispiel:
Das ist es, keine Magie mehr nötig :)
quelle
const browserHistory = useRouterHistory(createHistory)({ basename: '/<appname>' });
Wenn Sie Express oder ein anderes Framework im Backend verwenden, können Sie die gleiche Konfiguration wie unten hinzufügen und den öffentlichen Webpack-Pfad in der Konfiguration überprüfen. Dies sollte auch beim Neuladen funktionieren, wenn Sie BrowserRouter verwenden
quelle
Behebung des Fehlers "Kann nicht erhalten / URL" beim Aktualisieren oder beim direkten Aufrufen der URL.
Konfigurieren Sie Ihre webpack.config.js so , dass der angegebene Link die Routen wie folgt erwartet.
quelle
Bei der Verwendung von .Net Core MVC hat mir Folgendes geholfen:
Grundsätzlich fallen auf der MVC-Seite alle nicht übereinstimmenden Routen in die
Home/Index
angegebenen Positionenstartup.cs
. Im Inneren istIndex
es möglich, die ursprüngliche Anforderungs-URL abzurufen und überall dort weiterzugeben, wo sie benötigt wird.quelle
Wenn Sie in IIS hosten; Das Hinzufügen zu meiner Webkonfiguration hat mein Problem gelöst
Sie können eine ähnliche Konfiguration für jeden anderen Server vornehmen
quelle
Für den Fall, dass jemand hier nach einer Lösung für React JS SPA mit Laravel sucht. Die akzeptierte Antwort ist die beste Erklärung dafür, warum solche Probleme auftreten. Wie bereits erläutert, müssen Sie sowohl die Client- als auch die Serverseite konfigurieren. Fügen Sie in Ihre Blade-Vorlage die mitgelieferte js-Datei ein. Stellen Sie sicher, dass Sie
URL facade
diese verwendenStellen Sie in Ihren Routen sicher, dass dies dem Hauptendpunkt hinzugefügt wird, an dem sich die Blade-Vorlage befindet. Zum Beispiel,
Das Obige ist der Hauptendpunkt für die Blade-Vorlage. Fügen Sie jetzt auch eine optionale Route hinzu.
Das Problem besteht darin, dass zuerst die Blade-Vorlage und dann der Reaktionsrouter geladen wird. Wenn Sie also laden
'/setting-alerts'
, werden HTML und JS geladen. Beim Laden'/setting-alerts/about'
wird es jedoch zuerst auf der Serverseite geladen . Da sich auf der Serverseite an diesem Speicherort nichts befindet, wird nicht gefunden zurückgegeben. Wenn Sie über diesen optionalen Router verfügen, wird dieselbe Seite geladen, und der Reaktionsrouter wird ebenfalls geladen. Anschließend entscheidet der Reaktionslader, welche Komponente angezeigt werden soll. Hoffe das hilft.quelle
/user/{userID}
Zum Beispiel muss ich beim Laden nur eine universelle/user
HTML-Ansicht zurückgeben, die ID mitbringen und sie mit AJAX oder Axios aufrufen. Ist das möglich? Sind sie SEO-freundlich?Für diejenigen, die IIS 10 verwenden, sollten Sie dies tun, um dies zu korrigieren. Stellen Sie sicher, dass Sie browserHistory verwenden. Als Referenz werde ich den Code für das Routing angeben, aber das ist nicht wichtig, was wichtig ist, ist der nächste Schritt nach dem folgenden Komponentencode:
Da das Problem darin besteht, dass IIS eine Anforderung von Client-Browsern empfängt, interpretiert es die URL so, als würde es nach einer Seite fragen, und gibt dann eine 404-Seite zurück, da keine Seite verfügbar ist. Mach Folgendes:
Und es wird jetzt gut funktionieren.
Ich hoffe, es hilft. :-)
quelle
Ich verwende WebPack, ich hatte das gleiche Problem Lösung => In Ihrer server.js-Datei
Warum wird meine Anwendung nach dem Aktualisieren nicht gerendert?
quelle
Verwenden Sie
HashRouter
für mich auch mit Redux funktioniert , ersetzen Sie einfach:zu:
quelle
Ich hatte das gleiche Problem und das hier Lösung funktionierte für uns.
Hintergrund:
Wir hosten mehrere Apps auf demselben Server. Wenn wir aktualisieren würden, würde der Server nicht verstehen, wo er nach unserem Index im dist-Ordner für diese bestimmte App suchen soll. Der obige Link führt Sie zu dem, was für uns funktioniert hat ... Ich hoffe, dies hilft, da wir einige Stunden damit verbracht haben, eine Lösung für unsere Bedürfnisse zu finden.
Wir benutzen:
meine webpack.config.js
meine index.js
meine app.js.
quelle
Ich mag diese Art, damit umzugehen. Versuchen Sie Folgendes hinzuzufügen: yourSPAPageRoute / * auf der Serverseite, um dieses Problem zu beheben.
Ich habe mich für diesen Ansatz entschieden, da selbst die native HTML5-Verlaufs-API die korrekte Umleitung bei der Seitenaktualisierung nicht unterstützt (soweit ich weiß).
Hinweis: Die ausgewählte Antwort hat dies bereits angesprochen, aber ich versuche, genauer zu sein.
Express Route
Getestet und wollte dies nur teilen.
Ich hoffe es hilft.
quelle