Как получить параметры запроса в response-router v4

Ответ 1

Возможность анализировать строки запроса была выведена из V4, потому что на протяжении многих лет были запросы для поддержки различной реализации. При этом команда решила, что было бы лучше, если бы пользователи решили, как выглядит эта реализация. Мы рекомендуем импортировать строку запроса lib. Здесь один, который я использую

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

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

Вы также можете использовать new URLSearchParams, если хотите что-то родное, и оно работает для ваших нужд

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

Вы можете подробнее узнать о решении здесь

Ответ 2

Данный ответ является солидным.

Если вы хотите использовать модуль qs вместо строки запроса (они примерно одинаковы по популярности), вот синтаксис:

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

Опция ignoreQueryPrefix - игнорировать начальный вопросительный знак.

Ответ 3

Принятый ответ работает хорошо, но если вы не хотите устанавливать дополнительный пакет, вы можете использовать это:

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

вернет value

Ответ 4

Я изучал параметры для реакции маршрутизатора v4, и они не использовали его для v4, а не как реагировать на маршрутизатор v2/3. Я оставлю еще одну функцию - может быть, кто-то найдет ее полезной. Вам нужен только es6 или простой 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;
}

Кроме того, эту функцию можно улучшить

Ответ 5

Я только что сделал это, поэтому не нужно менять всю структуру кода (где вы используете запрос из хранилища редукторных маршрутизаторов), если вы обновляетесь, чтобы реагировать на маршрутизатор версии 4 или новее с более низкой версии.

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

Ответ 6

Без необходимости какой-либо упаковки:

const params = JSON.parse(JSON.stringify(this.props.match.params));

Затем вы можете получить доступ к соответствующим параметрам с params.id

Ответ 7

А?

queryfie(string){
    return string
        .slice(1)
        .split('&')
        .map(q => q.split('='))
        .reduce((a, c) => { a[c[0]] = c[1]; return a; }, {});
}

queryfie(this.props.location.search);