So erhalten Sie Abfrageparameter in React-Router v4

Ich verwende React-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 der HomePageKomponente erhalten. Ich habe location.searchparam gefunden , der so aussieht : ?key=value, also ist es nicht analysiert.

Was ist der richtige Weg, um Abfrageparameter mit React-Router v4 abzurufen?

Die Möglichkeit, Abfragezeichenfolgen zu analysieren, wurde aus V4 entfernt, da im Laufe der Jahre Anforderungen zur Unterstützung unterschiedlicher Implementierungen gestellt wurden. Damit entschied das Team, dass es für die Benutzer am besten ist, zu entscheiden, wie diese Implementierung aussieht. Wir empfehlen, eine Abfragezeichenfolge lib zu importieren. Hier ist eine, die ich benutze

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

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

Sie können es auch verwenden, new URLSearchParamswenn Sie etwas Natives möchten und es für Ihre Bedürfnisse funktioniert

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

Mehr über die Entscheidung können Sie hier lesen

Die gegebene Antwort ist solide.

Wenn Sie die verwenden möchten qs Modul statt Abfrage-String (sie sind ungefähr gleich in der Popularität), hier ist die Syntax:

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

Die Option ignoreQueryPrefix besteht darin, das führende Fragezeichen zu ignorieren.

Die akzeptierte Antwort funktioniert gut, aber wenn Sie 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, ' '));
  };

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

getUrlParameter('key');

wird zurückkehren value

Ein weiterer nützlicher Ansatz könnte darin bestehen, das Out-of-the-Box-Verfahren URLSearchParamswie folgt zu verwenden.

  let { search } = useLocation();

   const query = new URLSearchParams(search);
   const paramField = query.get('field');
   const paramValue = query.get('value');

Sauber, lesbar und benötigt kein Modul. Weitere Infos unten;

• https://reacttraining.com/react-router/web/example/query-parameters
• https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Ich habe über Parameter für React Router v4 recherchiert und sie haben sie nicht für v4 verwendet, nicht wie React Router v2 / 3. Ich werde eine andere Funktion verlassen - vielleicht findet es jemand hilfreich. Sie benötigen 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;
}

Auch diese Funktion kann verbessert werden

Eh?

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);

Ich habe dies gerade gemacht, damit Sie nicht die gesamte Codestruktur ändern müssen (wenn Sie eine Abfrage aus dem Redux-Router-Speicher verwenden), wenn Sie ein Update durchführen, um Router v4 oder höher von einer niedrigeren Version zu reagieren.

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

Ohne Paket:

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

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