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

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

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

 const App = () => {

   return (
     <Router>
       <div>

         <Route path="/user/:username" component={UserPage} />

       </div>
     </Router>
   );

 };

 const UserPage = () => {

   let { username } = useParams(); // Get the username from the URL.

   return (
     <div>Hello, {username}!</div> // Render a greeting with the username. 
   );

 };

URL இலிருந்து பயனர்பெயருடன் ஒரு பக்கத்தை ரெண்டர் செய்ய இந்தக் குறியீடு ரியாக்ட் ரூட்டரை அமைக்கிறது.

1. முதல் வரி ரியாக்ட் ரூட்டர் DOM நூலகத்திலிருந்து கூறுகளை இறக்குமதி செய்கிறது.
2. ஆப் செயல்பாடு ரூட்டர் கூறுகளை அதன் உள்ளே ஒரு ரூட் கூறுகளுடன் வழங்குகிறது, இது “/user/” உடன் தொடங்கும் எந்த URL ஆனது பயனர் பக்க கூறுகளை வழங்க வேண்டும் என்பதைக் குறிப்பிடுகிறது.
3. URL இலிருந்து பயனர்பெயரைப் பெற பயனர் பக்கச் செயல்பாடு useParams() ஐப் பயன்படுத்துகிறது.

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

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

ரியாக்டில் ஒரு வழியிலிருந்து URL அளவுருக்களை எவ்வாறு பெறுவது

ரியாக்ட் ரூட்டரில், யூஸ்பராம்ஸ் ஹூக்கைப் பயன்படுத்தி ஒரு வழியிலிருந்து URL அளவுருக்களை அணுகலாம். இந்த ஹூக் URL அளவுருக்களின் முக்கிய மதிப்பு ஜோடிகளைக் கொண்ட ஒரு பொருளை வழங்குகிறது. எடுத்துக்காட்டாக, உங்கள் வழி /user/:id எனில், ஐடி அளவுருவை useParams().id உடன் அணுகலாம்.