Вирішено: отримати запит від маршрутизатора url react dom v6

Основна проблема, пов’язана з отриманням запиту з URL React Router DOM v6, полягає в тому, що він не надає вбудованого способу доступу до параметрів запиту. Замість цього розробники повинні вручну проаналізувати рядок URL-адреси та самостійно витягти параметри запиту. Це може бути виснажливим процесом і може призвести до помилок, якщо його виконати неправильно. Крім того, якщо структура URL-адреси змінюється, код може знадобитися відповідним чином оновити.

import { useLocation } from "react-router-dom";

const MyComponent = () => {
  const location = useLocation();

  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>My Component</h1>
      <p>Query Param: {queryParams.get("myParam")}</p>
    </div>
  );  
};

1. “import { useLocation } from 'react-router-dom';” – Цей рядок імпортує хук useLocation з бібліотеки react-router-dom.
2. “const MyComponent = () => {” – цей рядок оголошує функцію під назвою MyComponent, яка повертатиме компонент React.
3. “const location = useLocation();” – Цей рядок використовує імпортований хук useLocation для отримання інформації про поточне розташування програми (наприклад, URL-адресу).
4. “const queryParams = new URLSearchParams(location.search);” – Цей рядок створює об’єкт, який містить усі параметри запиту в поточній URL-адресі (наприклад, ?myParam=foo).
5. Решта коду просто повертає компонент React з тегами h1 і p, який відображає значення myParam у рядку запиту URL-адреси (якщо воно існує).

React роутер Dom

React Router DOM — це бібліотека маршрутизації для React, яка дозволяє розробникам створювати та керувати маршрутами в своїх програмах React. Він надає API для навігації програмою, дозволяючи розробникам декларативно визначати маршрути, відтворювати компоненти на основі поточної URL-адреси та зв’язувати різні частини програми. Він також підтримує такі функції, як динамічне зіставлення маршрутів, відстеження місцезнаходження та навігаційні сторожі.

Як отримати рядок запиту в маршрутизаторі React v6

v6

У React Router v6 ви можете отримати доступ до параметрів рядка запиту за допомогою хука useLocation. Цей хук повертає об’єкт розташування, який містить інформацію про поточну URL-адресу, включаючи шлях, пошук, хеш і властивості стану. Властивість пошуку містить параметри рядка запиту як рядок. Потім ви можете проаналізувати цей рядок, щоб отримати об’єкт, що містить усі параметри рядка запиту.
Наприклад:
const {пошук} = useLocation();
const params = новий URLSearchParams(пошук);
const param1 = params.get('param1');