தீர்க்கப்பட்டது: ரியாக்ட் ரூட்டர் டோம் இன்டெக்ஸ்ரீடைரக்ட்

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

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

<Router>
  <Route path="/">
    <IndexRedirect to="/home" />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </Route>  
</Router>

1. "'react-router-dom' இலிருந்து {BrowserRouter ஐ Router, Route, IndexRedirect} ஆக இறக்குமதி செய்யவும்;" - இந்த வரி ரியாக்ட்-ரவுட்டர்-டோம் நூலகத்திலிருந்து உலாவி ரூட்டர், ரூட் மற்றும் இன்டெக்ஸ்ரீடைரக்ட் கூறுகளை இறக்குமதி செய்கிறது.

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

3. "” – இந்த வரியானது '/' பாதையுடன் ஒரு பாதையை அமைக்கிறது. இந்தப் பாதைக்கான எந்தவொரு கோரிக்கையும் இந்த வழியில் கையாளப்படும்.

4. "” – இந்த வரி எந்த கோரிக்கையையும் '/' பாதைக்கு '/home' க்கு திருப்பி விடுகிறது.

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

6. "” – இந்த வரியானது '/about' என்ற பாதையுடன் ஒரு பாதையை அமைக்கிறது. இந்தப் பாதைக்கான எந்தவொரு கோரிக்கையும், ரூட் கூறுக்கு வாதமாக அனுப்பப்படும் About கூறுகளால் கையாளப்படும்.

7."" & "" - இந்த கோடுகள் முறையே பாதைகள் மற்றும் திசைவி கூறுகளை மூடுகின்றன

IndexRedirect என்றால் என்ன

IndexRedirect என்பது ரியாக்ட் ரூட்டரில் உள்ள ஒரு கூறு ஆகும், இது ஒரு வழியிலிருந்து மற்றொரு வழிக்கு திருப்பிவிட உங்களை அனுமதிக்கிறது. உங்கள் பயன்பாட்டின் ரூட் URL இலிருந்து மற்றொரு வழிக்கு பயனரை நீங்கள் திருப்பிவிட விரும்பும் போது இது பயன்படுத்தப்படுகிறது. எடுத்துக்காட்டாக, உங்களிடம் “/” இன் ரூட் URL உள்ள பயன்பாடு இருந்தால், பயனர் ரூட் URL ஐப் பார்வையிடும்போது “/home” க்கு திருப்பிவிட IndexRedirect ஐப் பயன்படுத்தலாம்.

IndexRedirect செய்வது எப்படி

React Router இல் உள்ள IndexRedirect என்பது உங்கள் பயன்பாட்டின் ரூட் URL இலிருந்து மற்றொரு URL க்கு பயனர்களைத் திருப்பிவிடுவதற்கான ஒரு வழியாகும். உங்கள் பயன்பாட்டின் மிக முக்கியமான பக்கத்திற்கு பயனர்களை வழிநடத்த அல்லது இறங்கும் பக்கத்தை உருவாக்க இது பயனுள்ளதாக இருக்கும்.

React Router இல் IndexRedirect செய்ய, நீங்கள் இதைப் பயன்படுத்த வேண்டும் கூறு. இந்த கூறு இரண்டு முட்டுகள் எடுக்கும்: "to" மற்றும் "push". பயனர்கள் திருப்பிவிடப்பட வேண்டும் என்று நீங்கள் விரும்பும் URL ஐக் குறிப்பிட “to” prop பயன்படுத்தப்படுகிறது, அதே சமயம் “புஷ்” ப்ராப் இந்த வழிமாற்றம் நிகழும்போது உலாவி வரலாறு புதுப்பிக்கப்பட வேண்டுமா இல்லையா என்பதை தீர்மானிக்கிறது (இயல்புநிலையாக உண்மை).

எடுத்துக்காட்டாக, உங்கள் ரூட் URL ஐ (எ.கா., www.example.com) பார்வையிடும் பயனர்கள் www.example.com/home க்கு திருப்பிவிடப்பட வேண்டுமென நீங்கள் விரும்பினால், இது போன்ற IndexRedirectஐப் பயன்படுத்தலாம்:

… மற்ற வழிகள்…