தீர்க்கப்பட்டது: ரியாக்ட் ரூட்டர் டோம் பதிவிறக்கவும்

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

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

ReactDOM.render(
  <Router>
    <Route path="/">
      <App />
    </Route>
  </Router>, 
  document.getElementById('root'));

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

2. “ReactDOM.render(” – இந்த வரியானது வழங்கப்பட்ட கொள்கலனில் உள்ள DOM இல் ஒரு ரியாக்ட் உறுப்பை வழங்குவதற்கு ReactDOM ரெண்டர் முறையை அழைக்கிறது.

3. "” – இது ரூட்டர் கூறுக்கான தொடக்கக் குறிச்சொல்லாகும், இது எங்கள் பயன்பாட்டிற்கான ரூட்டிங் செயல்பாட்டை வழங்குவதற்காக எங்கள் எல்லா வழிகளையும் மூடுவதற்குப் பயன்படுத்தப்படும்.

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

5. "” – இது ஒரு சுய மூடும் குறிச்சொல்லாகும், இந்த வழியானது ரியாக்ட் ரூட்டர் டோம் மூலம் பொருந்தும்போது, ​​எங்கள் DOM ட்ரீயில் ஆப்ஸ் கூறுகளை ரெண்டர் செய்யும்.
ஆப்ஸ் கூறு என்பது எங்களின் கோட்பேஸில் வேறு எங்காவது வரையறுத்த அல்லது மற்றொரு நூலகம் அல்லது மெட்டீரியல் UI அல்லது பூட்ஸ்டார்ப் போன்ற தொகுப்பிலிருந்து இறக்குமதி செய்யப்பட்ட எந்த எதிர்வினை கூறுகளாகவும் இருக்கலாம்.

6. “” – இது மேலே உள்ள வரி 4 இல் திறக்கப்பட்ட பாதை கூறுக்கான மூடல் குறிச்சொல் ஆகும், இது இந்த குறிப்பிட்ட பாதை வரையறையை மூடுகிறது, இதன் மூலம் பிற வழிகள் தேவைப்பட்டால் எங்கள் கோட்பேஸில் அதன் செயல்பாடு அல்லது நடத்தை பாதிக்காமல் சேர்க்கப்படும். .

7. “” – இது மேலே உள்ள வரி 3 இல் திறக்கப்பட்ட ரூட்டர் கூறுக்கான மூடல் குறிச்சொல் ஆகும், இது இந்த குறிப்பிட்ட திசைவி வரையறையை மூடுகிறது, இதன் மூலம் பிற திசைவிகள் தேவைப்பட்டால் எங்கள் கோட்பேஸில் அதன் செயல்பாடு அல்லது நடத்தை பாதிக்காமல் சேர்க்கப்படும். ..

8.”document.getElementById('root'));” – இறுதியாக, நாங்கள் ஆவணம் getElementById ('root') யை ReactDOM ரெண்டர் முறைக்கு ஒரு வாதமாக அனுப்புகிறோம், இது DOM மரத்தின் உள்ளே பயன்பாட்டை எங்கு ஏற்ற/ரெண்டர் அவுட் செய்ய விரும்புகிறோம் என்பதைச் சொல்கிறது (இந்நிலையில் id= கொண்ட ஒரு உறுப்புக்குள்" ரூட்").

react-router-dom தொகுப்பு

ரியாக்ட் ரூட்டர் என்பது ரியாக்டிற்கான பிரபலமான ரூட்டிங் நூலகமாகும். பயன்பாட்டு வழிகள் மற்றும் வழிசெலுத்தலை நிர்வகிப்பதற்கான சக்திவாய்ந்த, பயன்படுத்த எளிதான API ஐ இது வழங்குகிறது. ரியாக்ட்-ரவுட்டர்-டோம் தொகுப்பு என்பது வலை பயன்பாடுகளுக்கான ரியாக்ட் ரூட்டரின் அதிகாரப்பூர்வ பதிப்பாகும். இது போன்ற கூறுகளை வழங்குகிறது மற்றும் உங்கள் பயன்பாட்டில் ரூட்டிங் நிர்வகிக்க உதவும். உங்கள் கூறுகளிலிருந்து தற்போதைய பாதையின் தகவலை அணுக, useHistory, useLocation மற்றும் useParams போன்ற ஹூக்குகளும் இதில் அடங்கும். ரியாக்ட்-ரவுட்டர்-டோம் மூலம் URL அளவுருக்கள், வினவல் சரங்கள் அல்லது தனிப்பயன் லாஜிக் ஆகியவற்றின் அடிப்படையில் டைனமிக் வழிகளை எளிதாக உருவாக்கலாம். உங்கள் பயன்பாட்டின் வழிசெலுத்தல் கட்டமைப்பின் மீது அதிக நுண்ணிய கட்டுப்பாட்டை வழங்க, டைனமிக் பிரிவுகளுடன் உள்ளமை வழிகளையும் நீங்கள் உருவாக்கலாம்.

ரியாக்ட் ரூட்டர் டோம் குறியீட்டை எவ்வாறு பதிவிறக்குவது உதாரணம்

1. React Router Dom ஐ நிறுவவும்:
உங்கள் திட்ட கோப்பகத்தில், React Router Dom ஐ நிறுவ பின்வரும் கட்டளையை இயக்கவும்:
`npm install react-router-dom`

2. ரியாக்ட் ரூட்டர் டோம் இறக்குமதி:
நீங்கள் React Router Dom ஐ நிறுவியவுடன், பின்வரும் குறியீட்டைக் கொண்டு அதை உங்கள் திட்டத்தில் இறக்குமதி செய்யலாம்:
`react-router-dom' இலிருந்து {BrowserRouter ஐ ரூட்டராகவும், Route } ஐ இறக்குமதி செய்யவும்``

3. ஒரு வழி கூறு உருவாக்கவும்:
அடுத்து, ஒரு பயனர் குறிப்பிட்ட பாதையைப் பார்வையிடும்போது பக்கத்தை வழங்கும் வழி கூறுகளை உருவாக்கவும். எடுத்துக்காட்டாக, உங்கள் பயன்பாட்டில் யாராவது/வீட்டிற்குச் செல்லும் போது, ​​ஒரு பக்கத்தை ரெண்டர் செய்ய விரும்பினால், பின்வரும் குறியீட்டைப் பயன்படுத்தலாம்:
``

4. உங்கள் ஆப்ஸை ரூட்டர் கூறு மூலம் மடிக்கவும்:
இறுதியாக, உங்கள் ஆப்ஸை ரூட்டர் பாகத்துடன் மடிக்கவும், இதனால் உங்கள் எல்லா வழிகளும் சரியாக வழங்கப்படும். உங்கள் ரூட் கோப்பில் (பொதுவாக index.js) பின்வரும் குறியீட்டைப் பயன்படுத்தி இதைச் செய்யலாம்: ` `.

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

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