Wie Abfrageparameter in React-Router V4

Question

erhalten Ich benutze react-Router-dom 4.0.0-Beta.6 in meinem Projekt. Ich habe einen Code wie folgt vor:

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

Und ich möchte Abfrage params in HomePage Komponente erhalten. Ich habe location.search param gefunden, die wie folgt aussieht: ?key=value, so ist es nicht geparst.

Was ist der richtige Weg, Abfrageparameter mit react-router v4 zu bekommen?

Answer 1

Die Möglichkeit zum Analysieren von Abfragezeichenfolgen wurde aus V4 herausgenommen, da im Laufe der Jahre Anfragen zur Unterstützung verschiedener Implementierungen gestellt wurden. Damit entschied das Team, dass es am besten wäre, wenn Benutzer entscheiden würden, wie diese Implementierung aussieht. Wir empfehlen, eine Abfragezeichenfolge lib zu importieren. Here's one that I use

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

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

Sie auch new URLSearchParams verwenden können, wenn Sie etwas nativem wollen und es funktioniert für Ihre Bedürfnisse

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

Sie mehr über die Entscheidung lesen here

Answer 2

gegebene Antwort scheint perfekt, Aber Wenn Sie keine zusätzlichen npm verwenden möchten, kann der Benutzer diese kleine Funktion 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, ' ')); 
    }; 

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

getUrlParameter('key'); 

geben Ausgang Wert

Answer 3

ich über params erforschte für Router v4 reagieren, und sie haben es nicht für v4 verwenden , nicht wie Router v2/3 reagieren. Ich werde eine andere Funktion verlassen - vielleicht wird jemand es 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; 
} 

Auch kann diese Funktion