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

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

І я хочу отримати параметри запиту в HomePageкомпоненті. Я знайшов location.searchparam, який виглядає так:, ?key=valueтому він не розібраний.

Який правильний спосіб отримати параметри запитів за допомогою реакційного маршрутизатора 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 router store), якщо ви оновлюєтесь, щоб реагувати на маршрутизатор 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