it-swarm.com.de

Abfrageparameter vom Hash-Fragment des React-Routers abrufen

Ich verwende React und React-Router für meine Anwendung auf der Clientseite. Ich kann anscheinend nicht herausfinden, wie ich die folgenden Abfrageparameter aus einer URL wie der folgenden erhalten kann:

http://xmen.database/search#/?status=APPROVED&page=1&limit=20

Meine Routen sehen so aus (der Pfad ist meines Wissens völlig falsch):

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!

101

Hinweis: Aus Kommentar kopieren/einfügen. Achten Sie darauf, den ursprünglichen Beitrag 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:

this.props.location.query

Es wird ein Hash aller verfügbaren Abfrageparameter in der URL erstellt.

Aktualisieren:

Informationen zu React-Router v4 finden Sie unter diese Antwort . Verwenden Sie grundsätzlich this.props.location.search, Um die Abfragezeichenfolge abzurufen und mit dem Paket query-string Zu analysieren, oder RLSearchParams :

const params = new URLSearchParams(paramsString); 
const tags = params.get('tags');
124
Duncan Finney

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:

this.props.location.query

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 mit Version 4.1.1). Weitere Informationen zu diesem Problem finden Sie hier: https://github.com/ReactTraining/ React-Router/Issues/441

Offenbar möchten sie, dass Sie Ihre eigene Methode zum Parsen der Abfrageparameter verwenden. Derzeit verwenden Sie diese Bibliothek, um die Lücke zu schließen: https://github.com/sindresorhus/query-string

57
Marrs

Die obigen Antworten funktionieren in react-router v4 Nicht. Folgendes habe ich getan, um das Problem zu lösen:

Installieren Sie zuerst Abfragezeichenfolge , das für das Parsen erforderlich ist.

npm install -save query-string

Jetzt in der gerouteten Komponente können Sie auf die nicht analysierte Abfragezeichenfolge wie folgt zugreifen

this.props.location.search

Sie können dies überprüfen, indem Sie sich an der Konsole anmelden.

Zum Schluss parsen, um auf die Abfrageparameter zuzugreifen

const queryString = require('query-string');
var parsed = queryString.parse(this.props.location.search);
console.log(parsed.param); // replace param with your own 

Wenn also die Abfrage wie folgt lautet: ?hello=world

console.log(parsed.hello) protokolliert world

44
hashcode55

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 Abfragezeichenfolge Abhängigkeit:

this.id = props.match.params.id;
this.searchObj = queryString.parse(props.location.search);
this.from = props.location.state.from;

console.log(this.id, this.searchObj, this.from);

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}

15
slideshowp2

Mit stringquery Package:

import qs from "stringquery";

const obj = qs("?status=APPROVED&page=1limit=20");  
// > { limit: "10", page:"1", status:"APPROVED" }

Mit Abfragezeichenfolge Package:

import qs from "query-string";
const obj = qs.parse(this.props.location.search);
console.log(obj.param); // { limit: "10", page:"1", status:"APPROVED" } 

Kein Paket:

const convertToObject = (url) => {
  const arr = url.slice(1).split(/&|=/); // remove the "?", "&" and "="
  let params = {};

  for(let i = 0; i < arr.length; i += 2){
    const key = arr[i], value = arr[i + 1];
    params[key] = value ; // build the object = { limit: "10", page:"1", status:"APPROVED" }
  }
  return params;
};


const uri = this.props.location.search; // "?status=APPROVED&page=1&limit=20"

const obj = convertToObject(uri);

console.log(obj); // { limit: "10", page:"1", status:"APPROVED" }


// obj.status
// obj.page
// obj.limit

Ich hoffe, das hilft :)

Viel Spaß beim Codieren!

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 React-Router 2.x-Lösungsweg erklärt. Der Dokumentation zur Verwendung von location (die Sie für Abfragen benötigen) in Komponenten wird tatsächlich durch den tatsächlichen Code widersprochen. Wenn Sie also ihren Rat befolgen, erhalten Sie folgende Warnungen:

Warning: [react-router] `context.location` is deprecated, please use a route component's `props.location` instead.

Es stellt sich heraus, dass Sie keine Kontexteigenschaft namens location haben können, die den Positionstyp verwendet. Sie können jedoch eine Kontexteigenschaft namens loc verwenden, die den Standorttyp verwendet. Die Lösung ist also eine kleine Modifikation ihrer Quelle wie folgt:

const RouteComponent = React.createClass({
    childContextTypes: {
        loc: PropTypes.location
    },

    getChildContext() {
        return { location: this.props.location }
    }
});

const ChildComponent = React.createClass({
    contextTypes: {
        loc: PropTypes.location
    },
    render() {
        console.log(this.context.loc);
        return(<div>this.context.loc.query</div>);
    }
});

Sie können auch nur die Teile des Ortsobjekts 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. Ich hoffe, das hilft.

4
Adam McCormick
"react-router-dom": "^5.0.0",

sie müssen kein zusätzliches Modul nur in Ihrer Komponente hinzufügen, das eine URL-Adresse wie diese hat:

http: // localhost: 3000/# /? authority '

sie können den folgenden einfachen Code ausprobieren:

    const search =this.props.location.search;
    const params = new URLSearchParams(search);
    const authority = params.get('authority'); //
2
meisam nazari

Einfache js Lösung:

queryStringParse = function(string) {
    let parsed = {}
    if(string != '') {
        string = string.substring(string.indexOf('?')+1)
        let p1 = string.split('&')
        p1.map(function(value) {
            let params = value.split('=')
            parsed[params[0]] = params[1]
        });
    }
    return parsed
}

Und Sie können es von überall mit aufrufen:

var params = this.queryStringParse(this.props.location.search);

Hoffe das hilft.

1
Vijesh Chandera

Beim Erstellen eines optimierten Produktionsbuilds mit dem Modul Abfragezeichenfolge wird möglicherweise die folgende Fehlermeldung angezeigt.

Fehler beim Minimieren des Codes aus dieser Datei: ./node_modules/query-string/index.js:8

Um dies zu überwinden, verwenden Sie bitte das alternative Modul stringquery , das den gleichen Vorgang ohne Probleme beim Ausführen des Builds ausführt.

import querySearch from "stringquery";

var query = querySearch(this.props.location.search);
0
Balasubramani M