தீர்க்கப்பட்டது: ரியாக்ட் ரூட்டர் அனைத்தையும் பிடிக்க ஃபால்பேக்கைச் சேர்க்கவும்

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

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

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Fallback route */}
      <Route component={NoMatch} /> 

    </Switch>
  </Router>  
);

// வரி 1: இந்த வரி ரியாக்ட்-ரவுட்டர்-டோம் நூலகத்திலிருந்து உலாவி ரூட்டர், ரூட் மற்றும் ஸ்விட்ச் கூறுகளை இறக்குமதி செய்கிறது.
// வரி 2: இந்த வரியானது ஆப் எனப்படும் ஒரு மாறிலியை வரையறுக்கிறது.
// வரி 3: இந்த வரி ரியாக்ட்-ரவுட்டர்-டோமில் இருந்து ரூட்டர் கூறுகளை வழங்குகிறது.
// வரி 4: இந்த வரி ரியாக்ட்-ரவுட்டர்-டோமில் இருந்து ஸ்விட்ச் கூறுகளை வழங்குகிறது.
// வரிகள் 5 & 6: இந்த கோடுகள் இரண்டு வழி கூறுகளை துல்லியமான பாதைகளுடன் வழங்குகின்றன மற்றும் அந்த பாதைகள் பொருந்தும் போது வழங்கப்பட வேண்டிய கூறுகள்.
// வரி 8: மற்ற வழிகள் எதுவும் பொருந்தவில்லை என்றால், இந்த வரி ஒரு பின்னடைவு பாதையை வழங்குகிறது. வேறு எந்த வழிகளும் பொருந்தவில்லை என்றால், இது NoMatch கூறுகளை வழங்கும்.

எதிர்வினை திசைவி என்றால் என்ன

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

கேட்ச்-ஆல் ஃபால்பேக் ரூட்

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

சரிவு பாதையை எவ்வாறு சரியாக வரையறுப்பது

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

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

ஏன் பின்னடைவு பாதை எப்போதும் தூண்டப்படுகிறது

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