Querystring-in reagieren-router

Ich versuche, eine Route Pfad mit query-string. Etwas in der Art von:

www.mywebsite.com/results?query1=:query1&query2=:query2&query3=:query3

Ich würde als übergang zu den "Ergebnissen" Komponente etwa so:

<Route path="/" component={Main}>
  <IndexRoute component={Home} />
  <Route path="results?query1=:query1&query2=:query2&query3=:query3"
    component={SearchResults} />
</Route>

In der SearchResults-container möchte ich die Möglichkeit haben, tun query1, query2 und query3 params.

Ich nicht in der Lage, damit es funktioniert. Ich bekomme die folgende Fehlermeldung:

bundle.js:22627 Warnung: [reagieren-router] Lage
"/Ergebnisse?Abfrage1=1&query2=2&query3=3" hat keine Entsprechung Routen

Ich habe versucht, die Schritte in der folgenden Anleitung: (Abschnitt: Was ist mit query-string-Parameter?)
https://www.themarketingtechnologist.co/react-router-an-introduction/

Bekomme ich hier etwas Hilfe?

InformationsquelleAutor der Frage samello | 2016-03-20

  1. 25

    Wenn Sie Reagieren-Router v2.xx können Sie den Zugriff auf die Abfrage-Parameter über die location.query - Objekt übergeben, um Ihre Route-Komponente.

    In anderen Worten, Sie könnten Bearbeiten Sie Ihre route wie folgt Aussehen:

    <Route path="results" component={SearchResults} />

    Und dann in Ihrem SearchResults Komponente verwenden this.props.location.query.query1 (ähnlich wie für query2 und query3) der query-parameter-Werte.

    EDIT: ist Dies immer noch der Fall, Reagieren die Router v3.xx.

    InformationsquelleAutor der Antwort jrubins

  2. 16

    Wenn Sie Reagieren, Router >= v4 location.query ist nicht mehr verfügbar. Sie können plug-in eine externe Bibliothek (wie https://www.npmjs.com/package/query-string), oder benutzen Sie etwas wie dieses:

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

    (nur im Hinterkopf behalten, dass URLSearchParams() ist nicht supportd im Internet Explorer)

    InformationsquelleAutor der Antwort Pensierinmusica

Schreibe einen Kommentar