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

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

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

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

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

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

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

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

  let { search } = useLocation();

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

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

• https://reacttraining.com/react-router/web/example/query-parameters
• https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

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

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

А?

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

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

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

Очень просто

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

Пример:

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

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

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

export default function UserComponent() {

  const { id } = useParams();

  return (
    <>{id}</>
  );
}

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

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

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