Querystring in react-router

Question

Sto tentando di impostare un percorso Route con una stringa di query. Qualcosa nelle linee di:

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

avrei di transizione ai "Risultati" componente 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 vorrei essere in grado di avere accesso fare Query1, interrogazione2 e query3 param.

Non sono riuscito a farlo funzionare. Ottengo il seguente errore:

bundle.js:22627 Warning: [react-router] Location "/results?query1=1&query2=2&query3=3" did not match any routes

Ho provato seguendo la procedura descritta nella seguente guida: (Sezione:? Che dire di parametri di stringa di query) https://www.themarketingtechnologist.co/react-router-an-introduction/

Posso avere un aiuto qui?

Answer 1

Se si utilizza React Router v2.xx, è possibile accedere ai parametri di query tramite l'oggetto location.query inoltrato al componente Route.

In altre parole, si potrebbe rielaborare il percorso per simile al seguente:

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

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

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

Answer 2

Se si utilizza React Router> = v4 location.query non è più disponibile. È possibile plug-in una libreria esterna (come https://www.npmjs.com/package/query-string), o usare qualcosa di simile:

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

(basta tenere a mente che non è URLSearchParams() supportd in Internet Explorer)