webentwicklung-frage-antwort-db.com.de

So erhalten Sie Abfrageparameter in dem reakt-router v4

Ich verwende den reakt-router-dom 4.0.0-beta.6 in meinem Projekt. Ich habe einen Code wie folgt:

<Route exact path="/home" component={HomePage}/>

Und ich möchte Abfrageparameter in HomePage Komponente bekommen Ich habe location.search param gefunden, das wie folgt aussieht: ?key=value, also wird es nicht analysiert.

Was ist der richtige Weg, um Abfrageparameter mit dem reakt-router v4 zu erhalten?

62
andrfas

Die Möglichkeit, Abfragezeichenfolgen zu parsen, wurde aus V4 herausgenommen, da im Laufe der Jahre Anforderungen zur Unterstützung unterschiedlicher Implementierungen vorhanden waren. Daher entschied das Team, dass die Benutzer am besten entscheiden sollten, wie diese Implementierung aussehen soll. Wir empfehlen den Import einer Abfragezeichenfolge lib. Hier ist eine, die ich benutze

const queryString = require('query-string');

const parsed = queryString.parse(props.location.search);

Sie können auch new URLSearchParams verwenden, wenn Sie etwas Natives möchten und es für Ihre Bedürfnisse geeignet ist

const params = new URLSearchParams(props.location.search);
const foo = params.get('foo'); // bar

Sie können mehr über die Entscheidung lesen hier

120
Tyler McGinnis

Die gegebene Antwort ist solide.

Wenn Sie das Modul qs anstelle von query-string verwenden möchten (sie sind ungefähr gleich populär), haben Sie folgende Syntax:

const query = qs.parse(props.location.search, {
  ignoreQueryPrefix: true
})

Mit der Option ignoreQueryPrefix wird das führende Fragezeichen ignoriert.

5
fisch2

Die akzeptierte Antwort funktioniert gut. Wenn Sie jedoch kein zusätzliches Paket installieren möchten, können Sie Folgendes verwenden:

getUrlParameter = (name) => {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    let results = regex.exec(window.location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  };

Gegebener http://www.google.co.in/?key=value

getUrlParameter('key');

wird value zurückgeben

3
Kartik_Agarwal

Ich habe nach Params für den Reaktiver Router v4 gesucht, und sie haben ihn nicht für V4 verwendet, nicht wie der Reaktorrouter v2/3. Ich verlasse eine andere Funktion - vielleicht wird es jemand hilfreich finden. Sie brauchen nur es6 oder einfaches Javascript.

function parseQueryParams(query) {
  //You get a '?key=asdfghjkl1234567890&val=123&val2&val3=other'
  const queryArray = query.split('?')[1].split('&');
  let queryParams = {};
  for (let i = 0; i < queryArray.length; i++) {
    const [key, val] = queryArray[i].split('=');
    queryParams[key] = val ? val : true;
  }
  /* queryParams = 
     {
      key:"asdfghjkl1234567890",
      val:"123",
      val2:true,
      val3:"other"
     }
  */
  return queryParams;
}

Diese Funktion kann auch verbessert werden

2
Xopsy

Ich habe dies gerade gemacht, also brauchen Sie nicht die gesamte Codestruktur zu ändern (wo Sie die Abfrage vom Redux-Routerspeicher verwenden), wenn Sie ein Update von Router v4 oder höher von einer niedrigeren Version durchführen.

https://github.com/saltas888/react-router-query-middleware

0

Ohne dass ein Paket benötigt wird:

const params = JSON.parse(JSON.stringify(this.props.match.params));

Dann erreichen Sie die zugehörigen Parameter mit params.id

0
mesarikaya

Wie?

queryfie(string){
    return string
        .slice(1)
        .split('&')
        .map(q => q.split('='))
        .reduce((a, c) => { a[c[0]] = c[1]; return a; }, {});
}

queryfie(this.props.location.search);
0
Faheem