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

87

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

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

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

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

андрфас
источник

Ответы:

181

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

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

Тайлер МакГиннис
источник
12
Не используйте URLSearchParams без полифилла. По состоянию на март 2018 года робот Googlebot использует Chrome 41 ( developers.google.com/search/docs/guides/rendering ), который не поддерживает URLSearchParams, и ваше приложение сломается при использовании на критическом пути ( caniuse.com/#feat=urlsearchparams ).
Джошуа Робинсон
12

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

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

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

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

fisch2
источник
1
Ницца. в январе 2019 года у qs было 12 миллионов загрузок в неделю по сравнению с 2,7 миллионами для строки запроса.
oyalhi
6

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

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

kartikag01
источник
Большое спасибо ... библиотека «строки запроса» не работала для меня по какой-то причине, но ваше решение работало как шарм. Я использовал «response-dom»: «^ 16.0.0», «response-router»: «^ 4.2.0», «response-router-dom»: «^ 4.2.2» и «query-string»: «^ 5.0.1»,
Rohan_Paul
это только предполагает, что у вас есть единственный параметр в вашей строке запроса. OP четко спрашивает, как получить параметры запроса - и это то, что делают упомянутые модули npm. Превратите это в функцию, которая возвращает объект пар ключ / значение из строки запроса, и это будет действительно полезно!
Энди Лоренц
@AndyLorenz, это работает даже тогда, когда у вас есть несколько параметров запроса, вызовите данную функцию с ключом, значение которого вы хотите получить. Да, метод также можно преобразовать, чтобы дать карту ключевых значений.
kartikag01 03
это сработает, но не лучшее решение @Kartik_Agarwal. (a) Это потребует многократного выполнения по существу одного и того же (потенциально дорогостоящего) кода, (b) отдельные переменные должны использоваться для каждого параметра, тогда как в идеале вы должны заполнить объект пар ключ / значение, (c) это требует чтобы узнать имена параметров и дополнительную проверку, существуют ли они. Если бы это был мой код, я бы искал регулярное выражение, которое может итеративно собирать все параметры, но я должен признать, что регулярные выражения заставляют мои уши кровоточить!
Энди Лоренц
6

Другой полезный подход может заключаться в следующем: использовать готовые решения URLSearchParams;

  let { search } = useLocation();

   const query = new URLSearchParams(search);
   const paramField = query.get('field');
   const paramValue = query.get('value');

Чистый, читаемый и не требует модуля. Более подробная информация ниже;

user10750437
источник
5

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

Также эту функцию можно улучшить

Xopsy
источник
2

А?

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

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

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

Димитрис Салтаферис
источник
1
Ссылка на решение приветствуется, но убедитесь, что ваш ответ полезен и без нее: добавьте контекст вокруг ссылки, чтобы ваши друзья-пользователи имели некоторое представление, что это такое и почему оно есть, а затем процитируйте наиболее релевантную часть страницы, которую вы повторная ссылка на, если целевая страница недоступна. Ответы, которые представляют собой не более чем ссылку, могут быть удалены .
mrun
0

Очень просто

просто используйте крючок useParams()

Пример:

Маршрутизатор :

<Route path="/user/:id" component={UserComponent} />

В вашем компоненте :

export default function UserComponent() {

  const { id } = useParams();

  return (
    <>{id}</>
  );
}
CommonSenseCode
источник
Это не работает для случая использования, описанного в вопросе (по крайней мере, не с React-Router v4: reactrouter.com/web/api/Hooks/useparams ) useParams предоставляет только параметры пути, а не параметры поиска.
Беннит,
-4

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

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

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

месарикая
источник
3
this.props.match.paramsсодержит параметры пути, этот вопрос касается параметров запроса.
Hubert