Gibt es eine Möglichkeit zu verhindern, dass /#/
bei Verwendung des React-Routers in der Adressleiste des Browsers angezeigt wird? Das ist mit ReactJS. dh Klicken Sie auf Links, um zu einer neuen Route zu gelangen, localhost:3000/#/
oder
localhost:3000/#/about
. Abhängig von der Route.
reactjs
react-router
Riesenelch
quelle
quelle
HashHistory
ISOBrowserHistory
. Siehe auch diese SO-Frage, in der ich viele Hintergrundinformationen zu diesem Thema gebe.Antworten:
Für die Versionen 1, 2 und 3 des React-Routers besteht die richtige Methode zum Festlegen der Route zum URL-Zuordnungsschema darin, eine Verlaufsimplementierung an den
history
Parameter von zu übergeben<Router>
. Aus der Historien-Dokumentation :Versionen 2 und 3
In React-Router 2 und 3 sieht Ihr Routenkonfigurationscode ungefähr so aus:
Version 1
In Version 1.x verwenden Sie stattdessen Folgendes:
Quelle: Upgrade-Handbuch für Version 2.0
Version 4
Für die kommende Version 4 von React-Router hat sich die Syntax stark geändert und es ist erforderlich, sie
BrowserRouter
als Router-Root-Tag zu verwenden.Source React Router Version 4 Docs
quelle
history
ein eigenständiges Paket ist, das Sie installieren müssen.browserHistory
in v2.x:import { browserHistory } from 'react-router' <Router history={browserHistory} />
Überprüfen Sie React -Router Upgrade-AnleitunghashHistory
, ist es eine Möglichkeit , am Ende dieser Abfrage param loswerden?http://localhost:8080/#/dashboard?_k=yqwtyu
Für die aktuelle Version 0.11 und nach vorn, müssen Sie hinzufügen
Router.HistoryLocation
zuRouter.run()
.<Routes>
sind jetzt veraltet. Informationen zur Implementierung von 0.12.x HistoryLocation finden Sie im Upgrade-Handbuch .quelle
Wenn Sie IE8 nicht unterstützen müssen, können Sie den Browserverlauf verwenden, und der React-Router verwendet ihn,
window.pushState
anstatt den Hash festzulegen.Wie genau dies zu tun ist, hängt von der verwendeten Version von React Router ab:
quelle
<Routes location="history">
dass alles in Ordnung ist, bis Sie den Browser auf der Route aktualisieren, dhlocalhost:3000/about
dann erhalte ich einen 404-Fehler. Wird das erwartet, ich benutzepython -m SimpleHTTPServer 3000
?/about
Ihre Root-Seite tatsächlich geladen/
. Andernfalls versucht Ihr Server, nach einer Route zu suchen, die übereinstimmt,/about
und findet nichts (404). Ich persönlich verwende Python nicht, aber normalerweise finden Sie entweder eine manuelle Route für/*
oder/.*
->/
funktioniert - oder es handelt sich umhtml5Mode
URLs in Ihren Servereinstellungen.Sie können tatsächlich .htaccess verwenden, um dies zu erreichen. Der Browser benötigt normalerweise das Trennzeichen für die Abfragezeichenfolge
?
oder um#
zu bestimmen, wo die Abfragezeichenfolge beginnt und die Verzeichnispfade enden. Das gewünschte Endergebnis ist:www.mysite.com/dir
Wir müssen das Problem beheben, bevor der Webserver nach dem Verzeichnis sucht, nach dem er gefragt hat/dir
. Also platzieren wir eine.htaccess
Datei im Stammverzeichnis des Projekts.Anschließend erhalten Sie die Abfrageparameter mit window.location.pathname
Sie können dann die Verwendung von Reaktionsrouten vermeiden, wenn Sie möchten, und einfach die URL und den Browserverlauf bearbeiten, wenn Sie möchten. Hoffe das hilft jemandem ...
quelle
Installieren Sie das Verlaufspaket
Als nächstes importieren Sie createHistory und useBasename aus dem Verlauf
Wenn Ihre App-URL www.example.com/myApp lautet, sollte / root / myApp sein.
Übergeben Sie die Verlaufsvariable an den Router
Fügen Sie nun für alle Ihre Link-Tags ein "/" vor alle Pfade ein.
Die Inspiration für die Lösung kam von React-Router Example, das leider nicht richtig in ihrer API dokumentiert wurde.
quelle
Eine andere Möglichkeit, die Anzeige nach dem Hash zu handhaben (wenn Sie also pushState nicht verwenden!), Besteht darin, Ihren CustomLocation zu erstellen und ihn bei der ReactRouter-Erstellung zu laden.
Wenn Sie beispielsweise eine Hashbang-URL (also mit #!) Haben möchten, um den Google-Spezifikationen für das Crawlen zu entsprechen, können Sie eine HashbangLocation.js-Datei erstellen, die hauptsächlich die ursprüngliche HashLocation kopiert, z.
Beachten Sie die Funktion slashToHashbang .
Dann musst du es tun
Und das ist es :-)
quelle