Решено: получаване на заявка от url реагиране на рутер 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. „импорт { useLocation } от 'react-router-dom';” – Този ред импортира куката useLocation от библиотеката react-router-dom.
2. “const MyComponent = () => {” – Този ред декларира функция, наречена MyComponent, която ще върне React компонент.
3. „const местоположение = 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');