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

Я использую react-router-dom 4.0.0-beta.6 в моем проекте. У меня есть код ниже:

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

и я хочу получить параметры запроса в HomePage компонент. Я нашел location.search param, который выглядит так:?key=value, Так что это непросто.

Как правильно получить параметры запроса с помощью react-router v4?

5 ответов


возможность разбора строк запроса была взята из 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

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


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

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

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

на ignoreQueryPrefix опция должна игнорировать ведущий знак вопроса.


Я изучал параметры для react router v4, и они не использовали его для v4, а не как react router 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;
}

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


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

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


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

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