An warware: sami tambaya daga url react router dom v6

Babban matsalar da ke da alaƙa da samun tambaya daga URL React Router DOM v6 shine cewa baya samar da ginanniyar hanyar don samun damar sigogin tambaya. Madadin haka, dole ne masu haɓakawa su rarraba kirtan URL da hannu su fitar da sigogin tambaya da kansu. Wannan na iya zama tsari mai wahala kuma yana iya haifar da kurakurai idan ba a yi daidai ba. Bugu da ƙari, idan tsarin URL ɗin ya canza, ƙila a buƙaci sabunta lambar yadda ya kamata.

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. "shigo da {useLocation} daga 'react-router-dom';" - Wannan layin yana shigo da ƙugiya ta amfani da Location daga ɗakin karatu na react-router-dom.
2. “const MyComponent = () => {” – Wannan layin yana bayyana wani aiki da ake kira MyComponent wanda zai dawo da bangaren React.
3. "const location = useLocation();" - Wannan layin yana amfani da ƙugiya mai amfani da aka shigo da ita don samun bayani game da wurin da aikace-aikacen yake yanzu (misali URL).
4. "const queryParams = sabon URLSearchParams(location.search);" – Wannan layin yana ƙirƙirar wani abu wanda ya ƙunshi duk sigogin tambaya a cikin URL na yanzu (misali, ?myParam=foo).
5. Sauran lambar kawai tana mayar da bangaren React tare da alamar h1 da p wanda ke nuna darajar myParam a cikin igiyoyin tambaya na URL (idan akwai).

React na'ura mai ba da hanya tsakanin hanyoyin sadarwa Dom

React Router DOM babban ɗakin karatu ne don React wanda ke ba masu haɓakawa damar ƙirƙira da sarrafa hanyoyin cikin aikace-aikacen React ɗin su. Yana ba da API don kewaya aikace-aikacen, kyale masu haɓakawa su ayyana hanyoyi a fili, samar da abubuwan da suka danganci URL na yanzu, da haɗin kai tsakanin sassa daban-daban na aikace-aikacen. Hakanan yana goyan bayan fasali kamar daidaitawar hanya mai ƙarfi, bin diddigin wuri, da masu gadin kewayawa.

Ta yaya zan sami igiyar tambaya a cikin react v6 router

v6

A cikin React Router v6, zaku iya samun dama ga sigogin kirtani na tambaya ta amfani da ƙugiya ta amfaniLocation. Wannan ƙugiya tana mayar da wani abu na wuri wanda ya ƙunshi bayani game da URL na yanzu wanda ya haɗa da sunan hanya, bincike, zanta da kaddarorin jihohi. Kayan bincike ya ƙunshi sigogin kirtani na tambaya azaman kirtani. Sannan zaku iya rarraba wannan kirtani don samun wani abu mai ɗauke da duk sigogin kirtani na tambaya.
Misali:
const {bincike} = amfaniLocation();
const params = sabon URLSearchParams(bincike);
const param1 = params.get('param1');