Ich verwende React und React-Router für meine Anwendung auf der Client-Seite. Ich kann anscheinend nicht herausfinden, wie die folgenden Abfrageparameter von einer URL wie der folgenden abgerufen werden können:
http://xmen.database/search#/?status=APPROVED&page=1&limit=20
Meine Routen sehen so aus (der Weg ist völlig falsch, wie ich weiß):
var routes = (
<Route>
<DefaultRoute handler={SearchDisplay}/>
<Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
<Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);
Meine Route funktioniert einwandfrei, aber ich bin mir nicht sicher, wie ich den Pfad formatieren soll, um die gewünschten Parameter zu erhalten. Schätzen Sie jede Hilfe dazu!
javascript
reactjs
client-side
react-router
client-side-scripting
Christopher Robin
quelle
quelle
getCurrentQuery
willTransitionTo
Haken an Ihrem Handler verwenden. Es empfängt Abfragezeichenfolgenparameter. github.com/rackt/react-router/commit/…Antworten:
Hinweis: Aus Kommentar kopieren / einfügen. Achten Sie darauf, den Originalbeitrag zu mögen!
Schreiben in es6 und Verwenden von react 0.14.6 / react-router 2.0.0-rc5. Ich verwende diesen Befehl, um die Abfrageparameter in meinen Komponenten nachzuschlagen:
Es wird ein Hash aller verfügbaren Abfrageparameter in der URL erstellt.
Aktualisieren:
Informationen zu React-Router v4 finden Sie in dieser Antwort . Verwenden Sie grundsätzlich,
this.props.location.search
um die Abfragezeichenfolge abzurufen und mit demquery-string
Paket oder URLSearchParams zu analysieren :quelle
query
scheint in React Router 4 verschwunden zu sein. github.com/ReactTraining/react-router/issues/…ALT (vor v4):
Schreiben in es6 und Verwenden von react 0.14.6 / react-router 2.0.0-rc5. Ich verwende diesen Befehl, um die Abfrageparameter in meinen Komponenten nachzuschlagen:
Es wird ein Hash aller verfügbaren Abfrageparameter in der URL erstellt.
UPDATE (React Router v4 +):
this.props.location.query in React Router 4 wurde entfernt (derzeit unter Verwendung von v4.1.1). Weitere Informationen zu diesem Problem finden Sie hier: https://github.com/ReactTraining/react-router/issues/4410
Sie möchten anscheinend, dass Sie Ihre eigene Methode verwenden, um die Abfrageparameter zu analysieren. Derzeit wird diese Bibliothek verwendet, um die Lücke zu schließen: https://github.com/sindresorhus/query-string
quelle
TypeError: Cannot read property 'location' of undefined
|Die obigen Antworten funktionieren nicht
react-router v4
. Folgendes habe ich getan, um das Problem zu lösen:Zuerst installieren Abfrage-String , die für die Analyse benötigt wird.
npm install -save query-string
Jetzt können Sie in der gerouteten Komponente wie folgt auf die nicht analysierte Abfragezeichenfolge zugreifen
this.props.location.search
Sie können dies überprüfen, indem Sie sich in der Konsole anmelden.
Zum Schluss analysieren, um auf die Abfrageparameter zuzugreifen
Also, wenn Abfrage ist wie
?hello=world
console.log(parsed.hello)
wird protokollierenworld
quelle
const query = new URLSearchParams(props.location.search); console.log(query.get('hello'));
(brauche Polyfill für ältere Browser).Update 2017.12.25
"react-router-dom": "^4.2.2"
URL wie
BrowserHistory
::http://localhost:3000/demo-7/detail/2?sort=name
HashHistory
::http://localhost:3000/demo-7/#/detail/2?sort=name
mit Abfragezeichenfolgenabhängigkeit :
Ergebnisse:
2 {sort: "name"} home
"react-router": "^2.4.1"
URL wie
http://localhost:8080/react-router01/1?name=novaline&age=26
const queryParams = this.props.location.query;
queryParams ist ein Objekt, das die Abfrageparameter enthält:
{name: novaline, age: 26}
quelle
http://localhost:8090/#access_token=PGqsashgJdrZoU6hV8mWAzwlXkJZO8ImDcn&expires_in=7200&token_type=bearer
(dh nicht/
danach#
) Dann sollten Sielocation.hash
fürlocation.search
Hoffentlich hilft das :)
Viel Spaß beim Codieren!
quelle
Sie müssen kein zusätzliches Modul nur in Ihrer Komponente hinzufügen, das eine URL-Adresse wie diese hat:
http: // localhost: 3000 / # /? Behörde '
Sie können den folgenden einfachen Code ausprobieren:
quelle
Nachdem ich die anderen Antworten gelesen hatte (zuerst von @ duncan-finney und dann von @Marrs), machte ich mich auf die Suche nach dem Änderungsprotokoll, das den idiomatischen Reaktionsrouter 2.x erklärt, wie dies gelöst werden kann. Der Dokumentation zur Verwendung des Speicherorts (den Sie für Abfragen benötigen) in Komponenten widerspricht tatsächlich der tatsächliche Code. Wenn Sie also ihrem Rat folgen, erhalten Sie große wütende Warnungen wie diese:
Es stellt sich heraus, dass Sie keine Kontexteigenschaft namens location haben können, die den Standorttyp verwendet. Sie können jedoch eine Kontexteigenschaft namens loc verwenden, die den Standorttyp verwendet. Die Lösung ist also eine kleine Änderung an ihrer Quelle wie folgt:
Sie können auch nur die Teile des Standortobjekts weitergeben, die Sie für Ihre Kinder benötigen, um den gleichen Nutzen zu erzielen. Die Warnung wurde nicht geändert, um zum Objekttyp zu wechseln. Hoffentlich hilft das.
quelle
Einfache js Lösung:
Und Sie können es von überall aus aufrufen, indem Sie:
Hoffe das hilft.
quelle
Beim Erstellen eines optimierten Produktionsbuilds bei Verwendung des Abfragezeichenfolgenmoduls wird möglicherweise die folgende Fehlermeldung angezeigt .
Um dies zu überwinden, verwenden Sie bitte das alternative Modul namens stringquery, das den gleichen Prozess ohne Probleme beim Ausführen des Builds gut ausführt .
quelle