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

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

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

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

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

5 57
react-router react-router-v4 react-router-dom

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

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

105

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

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

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

на ignoreQueryPrefix опция состоит в том, чтобы игнорировать ведущий знак вопроса.

3

Я исследовал о параметрах маршрутизатора реагировать В4, и они не использовали его для В4, а не как реагировать маршрутизатор П2/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;
}

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

2

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

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

2

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

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

0