Lahendatud: hankige päring url react ruuterilt dom v6

Viimane uuendus: 09/11/2023
Autor: JavaScript SourceTrail

Peamine probleem, mis on seotud päringu hankimisega URL React Router DOM v6-st, on see, et see ei paku päringuparameetritele juurdepääsuks sisseehitatud võimalust. Selle asemel peavad arendajad URL-i stringi käsitsi sõeluma ja ise päringuparameetrid ekstraktima. See võib olla tüütu protsess ja võib põhjustada vigu, kui seda ei tehta õigesti. Lisaks võib URL-i struktuuri muutumisel olla vaja koodi vastavalt värskendada.

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. "import { useLocation } from "react-router-dom";" – See rida impordib react-ruuter-dom teegist konksu useLocation.
2. “const MyComponent = () => {” – see rida deklareerib funktsiooni nimega MyComponent, mis tagastab komponendi React.
3. "const location = useLocation();" – See rida kasutab rakenduse praeguse asukoha (nt URL) kohta teabe hankimiseks imporditud asukohta useLocation.
4. "const queryParams = new URLSearchParams(location.search);" – See rida loob objekti, mis sisaldab kõiki praeguse URL-i päringu parameetreid (nt ?myParam=foo).
5. Ülejäänud osa koodist tagastab lihtsalt komponendi React koos märgendiga h1 ja p, mis kuvab URL-i päringu stringis myParami väärtuse (kui see on olemas).

Reageeri ruuter Dom

React Router DOM on Reacti marsruutimisteek, mis võimaldab arendajatel oma Reacti rakendustes marsruute luua ja hallata. See pakub rakenduses navigeerimiseks API-d, mis võimaldab arendajatel deklaratiivselt määratleda marsruute, renderdada komponente praeguse URL-i alusel ja linkida rakenduse erinevate osade vahel. Samuti toetab see selliseid funktsioone nagu dünaamiline marsruudi sobitamine, asukoha jälgimine ja navigatsioonivalvurid.

Kuidas saada react v6 ruuteris päringustring

v6

React Router v6 puhul pääsete päringustringi parameetritele juurde, kasutades konksu useLocation. See konks tagastab asukohaobjekti, mis sisaldab teavet praeguse URL-i kohta, sealhulgas tee nime, otsingu, räsi ja oleku atribuute. Otsinguatribuut sisaldab päringu stringi parameetreid stringina. Seejärel saate seda stringi sõeluda, et saada objekt, mis sisaldab kõiki päringustringi parameetreid.
Näiteks:
const {otsing} = useLocation();
const params = new URLSearchParams(otsing);
const param1 = params.get('param1');

Seonduvad postitused: