தீர்க்கப்பட்டது: ரியாக்ட் ரூட்டர் டோம் என்பிஎம்

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

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

<Router>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

1. "'react-router-dom' இலிருந்து {BrowserRouter, Route ஐ ரூட்டராக இறக்குமதி செய்க;"
இந்த வரி ரியாக்ட்-ரவுட்டர்-டோம் லைப்ரரியில் இருந்து பிரவுசர் ரூட்டர் மற்றும் ரூட் கூறுகளை இறக்குமதி செய்கிறது.

2. ""
இந்த வரியானது பயன்பாட்டில் உள்ள அனைத்து வழிகளையும் மூடுவதற்குப் பயன்படுத்தப்படும் ரூட்டர் கூறுகளை உருவாக்குகிறது.

3. ""
இந்த வரியானது பாதை கூறுகளை உருவாக்குகிறது, இது பாதை '/' ஆக இருக்கும் போது முகப்பு கூறுகளை வழங்கும். பாதை சரியாக '/' ஆக இருக்கும் போது மட்டுமே இந்த பாதை பொருந்தும் என்பதை 'சரியான' ப்ராப் உறுதி செய்கிறது.

4. "” இந்த வரி ஒரு வழி கூறுகளை உருவாக்குகிறது, இது பாதை '/about' ஆக இருக்கும்போது About கூறுகளை வழங்கும்.

5. “” இந்த வரியானது ரூட்டர் கூறுகளை மூடிவிட்டு, எங்களின் அனைத்து வழிகளும் அறிவிக்கப்பட்டுவிட்டன என்று ரியாக்ட் செய்ய சமிக்ஞை செய்கிறது.

npm தொகுப்பு மேலாளர்

NPM (Node Package Manager) என்பது JavaScriptக்கான ஒரு தொகுப்பு மேலாளர் ஆகும், இது டெவலப்பர்கள் தங்கள் ரியாக்ட் பயன்பாடுகளுக்கான தொகுப்புகளை எளிதாக நிறுவவும், புதுப்பிக்கவும் மற்றும் நிர்வகிக்கவும் உதவுகிறது. இது ரியாக்ட் ரூட்டர் நூலகத்திற்கான இயல்புநிலை தொகுப்பு மேலாளர் மற்றும் ரியாக்ட் பயன்பாடுகளில் பயன்படுத்தக்கூடிய பரந்த அளவிலான தொகுப்புகளுக்கான அணுகலை வழங்குகிறது. NPM ஆனது டெவலப்பர்களை அதிகாரப்பூர்வ பதிவேட்டில் இருந்தும் மற்ற மூன்றாம் தரப்பு மூலங்களிலிருந்தும் தொகுப்புகளை விரைவாக கண்டுபிடித்து நிறுவ அனுமதிக்கிறது. வெவ்வேறு தொகுப்புகளுக்கு இடையே சார்புகளை நிர்வகிப்பதற்கான கருவிகளையும் இது வழங்குகிறது, இது ஒரு பயன்பாட்டில் ஒவ்வொரு தொகுப்பின் எந்த பதிப்புகள் நிறுவப்பட்டுள்ளன என்பதைக் கண்காணிப்பதை எளிதாக்குகிறது. கூடுதலாக, NPM ஆனது ஏற்கனவே உள்ள தொகுப்புகளை எளிதாக புதுப்பிக்க அல்லது அவை தேவைப்படாவிட்டால் அவற்றை நிறுவல் நீக்கவும் பயன்படுத்தலாம்.

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

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

Dom npm ரியாக்ட் ரூட்டரை நிறுவுவது எப்படி

1. ரியாக்ட் ரூட்டரை நிறுவவும்:
முதலில், npm அல்லது நூலைப் பயன்படுத்தி ரியாக்ட் ரூட்டர் தொகுப்பை நிறுவவும்.
உதாரணமாக, நீங்கள் npm ஐப் பயன்படுத்துகிறீர்கள் என்றால்:
npm react-router-dom நிறுவவும்

2. ரியாக்ட் ரூட்டரை இறக்குமதி செய்:
நிறுவல் முடிந்ததும், உங்கள் பயன்பாட்டிற்கு react-router-dom இலிருந்து கூறுகளை இறக்குமதி செய்ய வேண்டும். உதாரணத்திற்கு:
'react-router-dom' இலிருந்து {BrowserRouter ஐ ரூட்டராகவும், Route } ஐ இறக்குமதி செய்யவும்;

3. உங்கள் ஆப்ஸை ரூட்டர் பாகத்தில் மடிக்கவும்:
அடுத்த படி உங்கள் ரூட் கூறுகளை ஒரு உடன் மூட வேண்டும் react-router-dom இருந்து கூறு. இது உங்கள் பயன்பாட்டிற்கு ரூட்டிங் திறன்களை வழங்கும் மற்றும் பயனர் பார்வையிடும் தற்போதைய URL பாதையை அறிந்து கொள்ளும். உதாரணத்திற்கு:

கான்ஸ்ட் ஆப் = () => (
 
 

  {/* வழிகள் இங்கே செல்கின்றன */}
 

    );

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

கான்ஸ்ட் ஆப் = () => (
 
 

          // பயனர் “/” url பாதையைப் பார்வையிடும்போது முகப்பு கூறுகளை வழங்குகிறது                  // பயனர் “/about” url பாதையைப் பார்வையிடும் போது உபகரணத்தைப் பற்றி ரெண்டர் செய்கிறது       

   )

தொடர்புடைய இடுகைகள்:

ஒரு கருத்துரையை