Как получить параметры запроса в реагировать-маршрутизатор В4

Я'м, используя реагировать-маршрутизатор-дом 4.0.0-бета.6 в мой проект. У меня есть код, подобный следующему:

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

И я хочу получить параметры запроса в "Домашняя страница" компонент. Я'вэ нашел место.поиск параметра, который выглядит так: ?ключ=значение, так что неразобраться.

Что такое правильный способ, чтобы получить параметры запроса с реагировать-маршрутизатор В4?

Программирование
react-router react-router-dom react-router-v4
4-го апреля 2017 в 7:58
14 просмотров
Решение

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

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

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

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

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

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

Tyler McGinnis
Редактировал ответ 4-го февраля 2018 в 6:43
Комментарии (1)

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

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

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

В ignoreQueryPrefix возможность игнорировать ведущих вопросительный знак.

Комментарии (1)

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

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

вернемся значение

Julian
Редактировал ответ 24-го июля 2018 в 2:15
Комментарии (4)

Я исследовал о параметрах маршрутизатора реагировать В4, и они не'т использовать его для В4, а не как реагировать маршрутизатор П2/3. Я'Лл оставить другую функцию - может быть, кто-нибудь найдет его полезным. Вам нужно только ЕС6 или обычный 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;
}

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

ekhumoro
Редактировал ответ 22-го ноября 2017 в 10:17
Комментарии (0)

Да?

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);
Комментарии (0)

Я просто сделал это так, Дон'т нужно менять всю структуру кода(где вы используете запрос от маршрутизатора обертывание) если вы обновляете реагировать маршрутизатор V4 или выше версия ниже.

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

Комментарии (1)

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

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

Затем вы можете достичь соответствующих параметров с параметрами.ИД`

Комментарии (1)