தீர்க்கப்பட்டது: url react router dom v6 இலிருந்து வினவலைப் பெறவும்

URL ரியாக்ட் ரூட்டர் DOM v6 இலிருந்து வினவலைப் பெறுவது தொடர்பான முக்கிய பிரச்சனை என்னவென்றால், வினவல் அளவுருக்களை அணுகுவதற்கான உள்ளமைக்கப்பட்ட வழியை அது வழங்கவில்லை. அதற்கு பதிலாக, டெவலப்பர்கள் URL சரத்தை கைமுறையாக அலச வேண்டும் மற்றும் வினவல் அளவுருக்களை பிரித்தெடுக்க வேண்டும். இது ஒரு கடினமான செயலாக இருக்கலாம் மற்றும் சரியாக செய்யாவிட்டால் பிழைகள் ஏற்படலாம். கூடுதலாக, URL அமைப்பு மாறினால், குறியீடு அதற்கேற்ப புதுப்பிக்கப்பட வேண்டும்.

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. "react-router-dom' இலிருந்து {useLocation} ஐ இறக்குமதி செய்க;" - இந்த வரி react-router-dom லைப்ரரியில் இருந்து useLocation ஹூக்கை இறக்குமதி செய்கிறது.
2. “const MyComponent = () => {” – இந்த வரி MyComponent எனப்படும் செயல்பாட்டை அறிவிக்கிறது, இது ஒரு எதிர்வினை கூறுகளை வழங்கும்.
3. “const location = useLocation();” - இந்த வரியானது பயன்பாட்டின் தற்போதைய இருப்பிடம் (எ.கா. URL) பற்றிய தகவலைப் பெற இறக்குமதி செய்யப்பட்ட யூஸ்லொகேஷன் ஹூக்கைப் பயன்படுத்துகிறது.
4. “const queryParams = புதிய URLSearchParams(location.search);” – இந்த வரி தற்போதைய URL இல் உள்ள அனைத்து வினவல் அளவுருக்களையும் உள்ளடக்கிய ஒரு பொருளை உருவாக்குகிறது (எ.கா., ?myParam=foo).
5. மீதமுள்ள குறியீடு, URL வினவல் சரத்தில் (இருந்தால்) myParam இன் மதிப்பைக் காட்டும் h1 மற்றும் p குறிச்சொல்லுடன் ரியாக்ட் கூறுகளை மட்டுமே வழங்குகிறது.

ரியாக்ட் ரூட்டர் டோம்

ரியாக்ட் ரூட்டர் டிஓஎம் என்பது ரியாக்டிற்கான ரூட்டிங் லைப்ரரி ஆகும், இது டெவலப்பர்கள் தங்கள் ரியாக்ட் பயன்பாடுகளுக்குள் வழிகளை உருவாக்க மற்றும் நிர்வகிக்க அனுமதிக்கிறது. இது பயன்பாட்டை வழிசெலுத்துவதற்கு ஒரு API ஐ வழங்குகிறது, டெவலப்பர்கள் வழிகளை விளக்கமாக வரையறுக்கவும், தற்போதைய URL ஐ அடிப்படையாகக் கொண்ட கூறுகளை வழங்கவும் மற்றும் பயன்பாட்டின் வெவ்வேறு பகுதிகளுக்கு இடையே இணைக்கவும் அனுமதிக்கிறது. டைனமிக் ரூட் மேட்சிங், லொகேஷன் டிராக்கிங் மற்றும் நேவிகேஷன் கார்டுகள் போன்ற அம்சங்களையும் இது ஆதரிக்கிறது.

ரியாக்ட் வி6 ரூட்டரில் வினவல் சரத்தை எவ்வாறு பெறுவது

v6

React Router v6 இல், useLocation hookஐப் பயன்படுத்தி வினவல் சர அளவுருக்களை அணுகலாம். பாதைப்பெயர், தேடல், ஹாஷ் மற்றும் நிலை பண்புகள் உள்ளிட்ட தற்போதைய URL பற்றிய தகவலைக் கொண்ட இருப்பிடப் பொருளை இந்த ஹூக் வழங்குகிறது. தேடல் பண்பு வினவல் சரம் அளவுருக்களை ஒரு சரமாக கொண்டுள்ளது. வினவல் சரம் அளவுருக்கள் அனைத்தையும் உள்ளடக்கிய ஒரு பொருளைப் பெற நீங்கள் இந்த சரத்தை அலசலாம்.
உதாரணமாக:
const {search} = useLocation();
const params = புதிய URLSearchParams(தேடல்);
const param1 = params.get('param1');