Domanda Querystring in react-router


Sto cercando di impostare un percorso di instradamento con una stringa di query. Qualcosa nelle linee di:

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

Vorrei che passare al componente "Risultati" in questo modo:

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

Nel contenitore SearchResults mi piacerebbe poter accedere ai parametri query1, query2 e query3.

Non sono stato in grado di farlo funzionare. Ottengo il seguente errore:

bundle.js: 22627 Avviso: posizione [react-router]   "/ results? query1 = 1 & query2 = 2 & query3 = 3" non corrisponde ad alcuna route

Ho provato a seguire i passaggi della seguente guida: (Sezione: per quanto riguarda i parametri della stringa di query?) https://www.themarketingtechnologist.co/react-router-an-introduction/

Posso avere un aiuto qui?


20
2018-03-20 02:25


origine


risposte:


Se si utilizza React Router v2.xx, è possibile accedere ai parametri della query tramite location.query oggetto passato al tuo componente Route.

In altre parole, puoi rielaborare il tuo percorso in modo che assomigli al seguente:

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

E poi dentro il tuo SearchResults componente, usare this.props.location.query.query1 (simile per query2 e query3) per accedere ai valori dei parametri della query.

MODIFICARE: Questo è ancora il caso per React Router v3.xx.


24
2018-03-20 02:46



Se stai usando React Router> = v4 location.query non è più disponibile Puoi collegare una libreria esterna (come https://www.npmjs.com/package/query-string), o usare qualcosa come questo:

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

(tieni a mente questo URLSearchParams() non è supportato in Internet Explorer)


15
2018-05-08 15:09