Løst: få forespørgsel fra url react router dom v6

Hovedproblemet i forbindelse med at få forespørgsler fra URL React Router DOM v6 er, at det ikke giver en indbygget måde at få adgang til forespørgselsparametrene. I stedet skal udviklere manuelt parse URL-strengen og selv udtrække forespørgselsparametrene. Dette kan være en kedelig proces og kan føre til fejl, hvis det ikke gøres korrekt. Derudover, hvis URL-strukturen ændres, skal koden muligvis opdateres i overensstemmelse hermed.

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. "importer { useLocation } fra 'react-router-dom';" – Denne linje importerer useLocation-krogen fra react-router-dom-biblioteket.
2. “const MyComponent = () => {” – Denne linje erklærer en funktion kaldet MyComponent, som returnerer en React-komponent.
3. "const location = useLocation();" – Denne linje bruger den importerede useLocation-hook til at få information om den aktuelle placering af applikationen (f.eks. URL).
4. "const queryParams = new URLSearchParams(location.search);" – Denne linje opretter et objekt, der indeholder alle forespørgselsparametrene i den aktuelle URL (f.eks. ?myParam=foo).
5. Resten af ​​koden returnerer bare en React-komponent med et h1- og p-tag, der viser værdien af ​​myParam i URL-forespørgselsstrengen (hvis den findes).

Reager router Dom

React Router DOM er et routing-bibliotek til React, der giver udviklere mulighed for at oprette og administrere ruter i deres React-applikationer. Det giver en API til at navigere i applikationen, hvilket giver udviklere mulighed for deklarativt at definere ruter, gengive komponenter baseret på den aktuelle URL og linke mellem forskellige dele af applikationen. Det understøtter også funktioner såsom dynamisk rutematching, lokationssporing og navigationsvagter.

Hvordan får jeg forespørgselsstrengen i react v6 router

v6

I React Router v6 kan du få adgang til forespørgselsstrengparametrene ved hjælp af useLocation-krogen. Denne hook returnerer et lokationsobjekt, som indeholder information om den aktuelle URL, inklusive stinavn, søgning, hash og tilstandsegenskaber. Søgeegenskaben indeholder forespørgselsstrengparametrene som en streng. Du kan derefter parse denne streng for at få et objekt, der indeholder alle forespørgselsstrengparametrene.
For eksempel:
const {søg} = useLocation();
const params = new URLSearchParams(search);
const param1 = params.get('param1');