Solucionat: obteniu la consulta des de l'url react router dom v6

El principal problema relacionat amb l'obtenció de consultes des d'URL React Router DOM v6 és que no ofereix una manera integrada d'accedir als paràmetres de consulta. En lloc d'això, els desenvolupadors han d'analitzar manualment la cadena d'URL i extreure ells mateixos els paràmetres de consulta. Aquest pot ser un procés tediós i pot provocar errors si no es fa correctament. A més, si l'estructura de l'URL canvia, és possible que s'hagi d'actualitzar el codi en conseqüència.

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. "importar { useLocation } de 'react-router-dom';" – Aquesta línia importa el ganxo useLocation de la biblioteca react-router-dom.
2. “const MyComponent = () => {” – Aquesta línia declara una funció anomenada MyComponent que retornarà un component React.
3. "const location = useLocation();" – Aquesta línia utilitza el ganxo useLocation importat per obtenir informació sobre la ubicació actual de l'aplicació (p. ex., URL).
4. "const queryParams = new URLSearchParams(location.search);" – Aquesta línia crea un objecte que conté tots els paràmetres de consulta de l'URL actual (per exemple, ?myParam=foo).
5. La resta del codi només retorna un component React amb una etiqueta h1 i p que mostra el valor de myParam a la cadena de consulta d'URL (si existeix).

Encaminador de reacció Dom

React Router DOM és una biblioteca d'encaminament per a React que permet als desenvolupadors crear i gestionar rutes dins de les seves aplicacions React. Proporciona una API per navegar per l'aplicació, permetent als desenvolupadors definir rutes de manera declarativa, representar components basats en l'URL actual i enllaçar entre diferents parts de l'aplicació. També admet funcions com la concordança de rutes dinàmiques, el seguiment d'ubicacions i els guàrdies de navegació.

Com puc obtenir la cadena de consulta al router react v6

v6

A React Router v6, podeu accedir als paràmetres de la cadena de consulta mitjançant el ganxo useLocation. Aquest ganxo retorna un objecte d'ubicació que conté informació sobre l'URL actual, incloent-hi el nom del camí, la cerca, el hash i les propietats d'estat. La propietat de cerca conté els paràmetres de la cadena de consulta com a cadena. A continuació, podeu analitzar aquesta cadena per obtenir un objecte que contingui tots els paràmetres de la cadena de consulta.
Per exemple:
const {cerca} = useLocation();
const params = URLSearchParams nou (cerca);
const param1 = params.get('param1');