தீர்க்கப்பட்டது: எதிர்வினை திசைவி மறுஏற்றம் பக்கம் காணப்படவில்லை

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

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

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

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// வரி 1: இந்த வரி ரியாக்ட்-ரவுட்டர்-டோம் நூலகத்திலிருந்து உலாவி ரூட்டர், ரூட் மற்றும் ஸ்விட்ச் கூறுகளை இறக்குமதி செய்கிறது.

// வரி 3: இந்த வரியானது JSX குறியீட்டை வழங்கும் App எனப்படும் செயல்பாட்டை வரையறுக்கிறது.

// வரி 5: இந்த வரி முழு JSX குறியீட்டையும் react-router-dom இலிருந்து ஒரு ரூட்டர் பாகத்தில் மூடுகிறது.

// வரி 6: இந்த வரி அனைத்து வழிகளையும் ரியாக்ட்-ரவுட்டர்-டோமில் இருந்து ஸ்விட்ச் பாகத்தில் மூடுகிறது.

// வரிகள் 7 - 9: இந்த கோடுகள் முறையே '/' மற்றும் '/about' க்கான இரண்டு வழிகளை அவற்றின் அந்தந்த கூறுகளுடன் (முகப்பு மற்றும் அறிமுகம்) வரையறுக்கின்றன.

// வரிகள் 11 - 12: இந்த வரிகள் வேறு எந்த வழிகளும் பொருந்தாத பாதையை வரையறுக்கின்றன, இது "பக்கம் காணப்படவில்லை" என்று h1 குறிச்சொல்லை வழங்குகிறது.

பக்கம் பிழை காணப்படவில்லை

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

ரியாக்ட் ரூட்டரில் காணப்படாத பக்கத்தை எவ்வாறு கையாள்வது

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

உதாரணமாக:

} />

இது ஏற்கனவே உள்ள வழியால் ஏற்கனவே பொருந்தாத எந்த URL க்கும் பொருந்தும் மற்றும் உங்கள் NotFound கூறுகளை வழங்கும்.

எதிர்வினை பக்கத்தை மீண்டும் ஏற்றும்படி கட்டாயப்படுத்துவது எப்படி

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

const AppRouter = () => (

{/* உங்கள் வழிகள் இங்கே */}

);

வரலாற்றுப் பொருளை நீங்கள் அணுகியதும், அதன் மாற்று முறையைப் பயன்படுத்தலாம்:

history.replace('/some-route');