Löst: få förfrågan från url react router dom v6

Det största problemet med att få en fråga från URL React Router DOM v6 är att den inte tillhandahåller ett inbyggt sätt att komma åt frågeparametrarna. Istället måste utvecklare manuellt analysera URL-strängen och extrahera frågeparametrarna själva. Detta kan vara en tråkig process och kan leda till fel om det inte görs på rätt sätt. Dessutom, om URL-strukturen ändras, kan koden behöva uppdateras därefter.

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. "importera { useLocation } från 'react-router-dom';" – Den här raden importerar useLocation-kroken från react-router-dom-biblioteket.
2. “const MyComponent = () => {” – Den här raden deklarerar en funktion som heter MyComponent som returnerar en React-komponent.
3. "const location = useLocation();" – Den här raden använder den importerade useLocation-kroken för att få information om den aktuella platsen för applikationen (t.ex. URL).
4. "const queryParams = new URLSearchParams(location.search);" – Den här raden skapar ett objekt som innehåller alla frågeparametrar i den aktuella URL:en (t.ex. ?myParam=foo).
5. Resten av koden returnerar bara en React-komponent med en h1- och p-tagg som visar värdet på myParam i URL-frågesträngen (om den finns).

Reagera router Dom

React Router DOM är ett routingbibliotek för React som låter utvecklare skapa och hantera rutter inom sina React-applikationer. Det tillhandahåller ett API för att navigera i applikationen, vilket tillåter utvecklare att deklarativt definiera rutter, rendera komponenter baserat på den aktuella URL:en och länka mellan olika delar av applikationen. Den stöder också funktioner som dynamisk ruttmatchning, platsspårning och navigationsvakter.

Hur får jag frågesträngen i react v6 router

v6

I React Router v6 kan du komma åt frågesträngsparametrarna med hjälp av useLocation-kroken. Denna krok returnerar ett platsobjekt som innehåller information om den aktuella URL:en inklusive sökvägsnamn, sökning, hash och tillståndsegenskaper. Sökegenskapen innehåller frågesträngsparametrarna som en sträng. Du kan sedan analysera denna sträng för att få ett objekt som innehåller alla frågesträngsparametrar.
Till exempel:
const {sök} = useLocation();
const params = new URLSearchParams(search);
const param1 = params.get('param1');