Решено: добити упит са урл реацт рутера дом в6

Главни проблем у вези са добијањем упита од УРЛ Реацт Роутер ДОМ в6 је тај што не пружа уграђени начин за приступ параметрима упита. Уместо тога, програмери морају ручно да рашчлане УРЛ стринг и сами извуку параметре упита. Ово може бити досадан процес и може довести до грешака ако се не уради исправно. Поред тога, ако се структура УРЛ-а промени, код ће можда морати да се ажурира у складу са тим.

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. „импорт { усеЛоцатион } фром 'реацт-роутер-дом';“ – Ова линија увози куку усеЛоцатион из библиотеке реацт-роутер-дом.
2. “цонст МиЦомпонент = () => {” – Ова линија декларише функцију под називом МиЦомпонент која ће вратити Реацт компоненту.
3. „цонст лоцатион = усеЛоцатион();“ – Ова линија користи увезену куку усеЛоцатион да добије информације о тренутној локацији апликације (нпр. УРЛ).
4. „цонст куериПарамс = нев УРЛСеарцхПарамс(лоцатион.сеарцх);“ – Ова линија креира објекат који садржи све параметре упита у тренутној УРЛ адреси (нпр. ?миПарам=фоо).
5. Остатак кода само враћа Реацт компоненту са ознаком х1 и п која приказује вредност миПарам у стрингу УРЛ упита (ако постоји).

Реацт рутер Дом

Реацт Роутер ДОМ је библиотека рутирања за Реацт која омогућава програмерима да креирају и управљају рутама унутар својих Реацт апликација. Пружа АПИ за навигацију кроз апликацију, омогућавајући програмерима да декларативно дефинишу руте, рендерују компоненте на основу тренутног УРЛ-а и везу између различитих делова апликације. Такође подржава функције као што су динамичко подударање руте, праћење локације и заштита навигације.

Како да добијем стринг упита у реацт в6 рутеру

v6

У Реацт Роутер в6, можете приступити параметрима стринга упита помоћу куке усеЛоцатион. Ова кука враћа објекат локације који садржи информације о тренутној УРЛ адреси укључујући име путање, претрагу, хеш и својства стања. Својство претраге садржи параметре стринга упита као стринг. Затим можете рашчланити овај стринг да бисте добили објекат који садржи све параметре стринга упита.
На пример:
цонст {сеарцх} = усеЛоцатион();
цонст парамс = нев УРЛСеарцхПарамс(сеарцх);
цонст парам1 = парамс.гет('парам1');