தீர்க்கப்பட்டது: ஹிஸ்டரி ரியாக்ட் ரூட்டர் v6 ஆப்ஸைப் பயன்படுத்தவும்

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

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

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// இந்த குறியீடு ரியாக்ட்-ரவுட்டர்-டோம் நூலகத்திலிருந்து உலாவி ரூட்டர், ஸ்விட்ச், ரூட் மற்றும் யூஸ்ஹிஸ்டரி கூறுகளை இறக்குமதி செய்கிறது.
// இது பின்னர் ஒரு வரலாற்று பொருளை உருவாக்க யூஸ் ஹிஸ்டரி ஹூக்கைப் பயன்படுத்தும் ஆப் என்ற செயல்பாட்டை உருவாக்குகிறது.
// இந்த வரலாற்றுப் பொருள் handClick எனப்படும் செயல்பாட்டில் பயன்படுத்தப்படுகிறது, இது ஒரு புதிய நுழைவை வரலாற்று அடுக்கின் மீது தள்ளும்.
// ஆப் செயல்பாடு சில JSX ஐ வழங்குகிறது, இதில் onClick ஹேண்ட்லருடன் கூடிய பட்டன் உள்ளது, அது கிளிக் செய்யும் போது HandClick என்று அழைக்கிறது.
// இறுதியாக, அதன் பாதையில் "/புதிய-இருப்பிடம்" பொருந்தும்போது, ​​அதன் உள்ளே ஒரு ரூட் கூறுகளுடன் ஸ்விட்ச் கூறு உள்ளது.

யூஸ் ஹிஸ்டரி என்றால் என்ன

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

வினையில் பாதை வரலாற்றை எவ்வாறு பெறுவது

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

'react-router-dom' இலிருந்து {useHistory} ஐ இறக்குமதி செய்யவும்;

const MyComponent = () => {
const வரலாறு = useHistory();

// இப்போது நீங்கள் பாதை வரலாற்றை `வரலாறு` பொருளின் மூலம் அணுகலாம்.

திரும்ப (...);
}

ரியாக்ட் ரூட்டர் வரலாறு API ஐப் பயன்படுத்துகிறதா

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