தீர்க்கப்பட்டது: url ரியாக்ட் ரூட்டரில் அளவுருக்களைச் சேர்த்தல்

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

import {
  BrowserRouter as Router,
  Route,
  Link,
  useParams
} from "react-router-dom";

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. "react-router-dom" இலிருந்து {BrowserRouter ஐ Router, Route, Link, useParams} ஆக இறக்குமதி செய்யவும்;
// இது இந்த குறியீட்டில் பயன்படுத்தப்படும் react-router-dom நூலகத்தில் இருந்து கூறுகளை இறக்குமதி செய்கிறது.

2. // இது வெவ்வேறு வழிகளுக்கு இடையே வழிசெலுத்தலைக் கையாளும் ஒரு திசைவி கூறுகளை உருவாக்குகிறது.

3. // இது 'பயனர்பெயர்' என்ற டைனமிக் அளவுருவுடன் ஒரு வழியை உருவாக்குகிறது.

4. // இந்த வழி பொருந்தும் போது இது பயனர் கூறுகளை வழங்குகிறது.

5. ஜான் // இது /user/john வழிக்கான இணைப்பை உருவாக்குகிறது, இது கிளிக் செய்யும் போது பயனர் கூறுகளை 'john' பயனர்பெயர் அளவுருவாக வழங்கும்.

6. செயல்பாடு பயனர்() { //இது ஒரு செயல்பாட்டுக் கூறு ஆகும், இது பயனர்பெயரை ஒரு வாதமாக எடுத்து, அதன் மேலே உள்ள இணைப்பைக் கிளிக் செய்வதன் மூலம் அழைக்கப்படும் போது அதை div குறிச்சொற்களுக்குள் வழங்குகிறது.

7. {username} = useParams(); //இது UseParams() இலிருந்து பயனர்பெயரை அணுகுவதற்கு டிஸ்ட்ரக்சரிங் பயன்படுத்துகிறது.

8. திரும்ப (

); //இது பயனர்பெயருக்கு அனுப்பப்பட்ட எந்த மதிப்பையும் உள்ளடக்கிய ஒரு div உறுப்பை வழங்குகிறது, இது இந்த வழக்கில் 'ஜான்' ஆக இருக்கும்.

ரியாக்ட் ரூட்டர் என்றால் என்ன

ரியாக்ட் ரூட்டர் என்பது ரியாக்ட் பயன்பாடுகளுக்கான ரூட்டிங் லைப்ரரி ஆகும். வெவ்வேறு பக்கங்களுக்கு இடையே வழிசெலுத்தலுடன் ஒரு ஒற்றை-பக்க பயன்பாட்டை (SPA) உருவாக்க தேவையான முக்கிய கூறுகள் மற்றும் செயல்பாடுகளை இது வழங்குகிறது. பயன்பாட்டில் உள்ள குறிப்பிட்ட கூறுகளை வரைபடமாக்கும் பாதைகளான வழிகளை வரையறுக்க டெவலப்பர்களை இது அனுமதிக்கிறது. ரியாக்ட் ரூட்டர் வழிமாற்றுகள், டைனமிக் ரூட் பொருத்தம் மற்றும் வினவல் அளவுருக்கள் போன்ற அம்சங்களையும் வழங்குகிறது.

URLக்கான அளவுருக்கள்

ரியாக்ட் ரூட்டரில் உள்ள URLக்கான அளவுருக்கள் டெவலப்பர்களை URL இலிருந்து ரியாக்ட் கூறுகளுக்கு மாறும் தரவை அனுப்ப அனுமதிக்கின்றன. URL இல் அனுப்பப்பட்ட அளவுருக்களின் அடிப்படையில் வெவ்வேறு உள்ளடக்கத்தைக் காண்பிக்கப் பயன்படுத்தக்கூடிய டைனமிக் வழிகளை உருவாக்க இது பயனுள்ளதாக இருக்கும். எடுத்துக்காட்டாக, URL இல் அனுப்பப்பட்ட ஐடி அளவுருவுடன் பயனர் சுயவிவரப் பக்கத்தைக் காட்ட “/user/:id” போன்ற வழி பயன்படுத்தப்படலாம். URL இலிருந்து மாறும் தரவு தேவைப்படும் தரவு அல்லது பிற செயல்பாடுகளை வடிகட்டவும் அளவுருக்கள் பயன்படுத்தப்படலாம்.

ரியாக்டில் URL இல் ஒரு அளவுருவை எவ்வாறு சேர்ப்பது

ரியாக்ட் ரூட்டரில் உள்ள URL க்கு அளவுருக்களைச் சேர்ப்பது “பாராம்” பொருளைப் பயன்படுத்தி செய்யப்படுகிறது. URL இல் சேர்க்கப்படும் விசை-மதிப்பு ஜோடிகளில் அனுப்ப இந்த பொருள் உங்களை அனுமதிக்கிறது. ஒரு அளவுருவைச் சேர்க்க, அதைப் போன்ற அளவுருக்கள் பொருளில் சேர்க்கவும்:

const params = { param1: 'value1', param2: 'value2'};

பின்னர், உங்கள் வழியை உருவாக்கும் போது, ​​நீங்கள் params ஆப்ஜெக்டை ஒரு வாதமாக அனுப்பலாம்:

இந்த பாதையில் செல்லும்போது அளவுருக்கள் URL இல் சேர்க்கப்படும்.