Jak uzyskać parametry zapytania w react-router v4

Używam react-Router-dom 4.0.0-beta.6 w moim projekcie. Mam taki kod: 

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

I chcę uzyskać query params w HomePage komponencie. Znalazłem location.search param, który wygląda tak: ?key=value, więc jest nieparowany.

Jaki jest właściwy sposób na uzyskanie paramów zapytań za pomocą react-router v4?

Author: Elias Ojala, 2017-04-04
Source

5 answers

Możliwość parsowania ciągów zapytań została usunięta z V4, ponieważ przez lata pojawiały się prośby o obsługę różnych implementacji. W związku z tym zespół zdecydował, że najlepiej będzie, jeśli użytkownicy zdecydują, jak wygląda ta implementacja. Zalecamy zaimportowanie lib łańcucha zapytania. Oto jeden, który używam 

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

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

Możesz również użyć new URLSearchParams jeśli chcesz coś natywnego i działa na twoje potrzeby 

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

Możesz przeczytać więcej o decyzji tutaj

 105
Author: Tyler McGinnis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-04 18:43:27

Podana odpowiedź jest solidna.

Jeśli chcesz użyć modułu qs zamiast query-string (są mniej więcej równe pod względem popularności), oto składnia: 

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

Opcją ignoreQueryPrefix jest ignorowanie wiodącego znaku zapytania.

 3
Author: fisch2,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-25 08:07:49

Szukałem o paramach dla reactowego routera v4, i nie używali go dla v4, nie tak jak reactowy router v2 / 3. Zostawię kolejną funkcję - może komuś się to przyda. Potrzebujesz tylko es6 lub zwykłego 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;
}

Również Ta funkcja może być ulepszona

 2
Author: Xopsy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-22 22:17:17

Zaakceptowana odpowiedź działa dobrze, ale jeśli nie chcesz instalować dodatkowego pakietu, możesz użyć tego: 

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, ' '));
  };

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

getUrlParameter('key');

Zwróci value

 2
Author: Kartik_Agarwal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-24 02:15:36

Właśnie to zrobiłem, więc nie trzeba zmieniać całej struktury kodu (gdzie używasz zapytania z Redux Router store), jeśli zaktualizujesz do react router v4 lub wyższy z niższej wersji.

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

 0
Author: Dimitris Saltaferis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-23 09:27:13