Opgelost: krijg vraag van url reactie router dom v6

Het grootste probleem met betrekking tot het verkrijgen van query's van URL React Router DOM v6 is dat het geen ingebouwde manier biedt om toegang te krijgen tot de queryparameters. In plaats daarvan moeten ontwikkelaars de URL-tekenreeks handmatig ontleden en de queryparameters zelf extraheren. Dit kan een vervelend proces zijn en kan tot fouten leiden als het niet correct wordt uitgevoerd. Bovendien, als de URL-structuur verandert, moet de code mogelijk dienovereenkomstig worden bijgewerkt.

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. "importeer { useLocation } van 'react-router-dom';" – Deze regel importeert de useLocation-hook uit de react-router-dom-bibliotheek.
2. "const MyComponent = () => {" - Deze regel declareert een functie genaamd MyComponent die een React-component zal retourneren.
3. "const locatie = useLocation();" – Deze regel gebruikt de geïmporteerde useLocation-hook om informatie te krijgen over de huidige locatie van de applicatie (bijv. URL).
4. "const queryParams = nieuwe URLSearchParams (locatie.zoeken);" – Deze regel maakt een object aan dat alle queryparameters in de huidige URL bevat (bijv. ?myParam=foo).
5. De rest van de code retourneert gewoon een React-component met een h1- en p-tag die de waarde van myParam weergeeft in de URL-queryreeks (als deze bestaat).

Reageren router Dom

React Router DOM is een routeringsbibliotheek voor React waarmee ontwikkelaars routes binnen hun React-applicaties kunnen maken en beheren. Het biedt een API om door de applicatie te navigeren, waardoor ontwikkelaars declaratief routes kunnen definiëren, componenten kunnen renderen op basis van de huidige URL en kunnen linken tussen verschillende delen van de applicatie. Het ondersteunt ook functies zoals dynamische route-afstemming, locatietracering en navigatiebewakers.

Hoe krijg ik de queryreeks in de react v6-router

v6

In React Router v6 hebt u toegang tot de parameters van de queryreeks met behulp van de useLocation-hook. Deze hook retourneert een locatie-object dat informatie bevat over de huidige URL, inclusief eigenschappen voor padnaam, zoeken, hash en status. De zoekeigenschap bevat de querytekenreeksparameters als een tekenreeks. U kunt deze tekenreeks vervolgens ontleden om een ​​object te krijgen dat alle parameters van de querytekenreeks bevat.
Bijvoorbeeld:
const {zoeken} = useLocation();
const params = nieuwe URLSearchParams(zoeken);
const param1 = params.get('param1');