தீர்க்கப்பட்டது: ரியாக்ட் ரூட்டர் வரலாற்றில் தரவு அனுப்புதல்%2Cpush

ரியாக்ட் ரூட்டர் வரலாற்றில் தரவை அனுப்புவது தொடர்பான முக்கிய பிரச்சனை, புஷ் ஆனது பக்க புதுப்பிப்புகளில் தரவு தொடர்ந்து இருக்காது. ஒரு பயனர் பக்கத்தைப் புதுப்பிக்கும் போது, ​​history.push இல் சேமிக்கப்பட்ட தரவு இழக்கப்படும் மற்றும் அடுத்தடுத்த பக்க ஏற்றங்களில் பயன்படுத்த கிடைக்காது. இது எதிர்பாராத நடத்தைக்கு வழிவகுக்கும் மற்றும் முந்தைய பக்க ஏற்றத்திலிருந்து தரவை அணுக அல்லது சேமிக்க முயற்சிக்கும்போது சிக்கல்களை ஏற்படுத்தலாம்.

import { useHistory } from "react-router-dom";

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: "/mypage", state: data });
  };

  return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};

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

2. இந்த வரியானது MyComponent எனப்படும் செயல்பாட்டு கூறுகளை அறிவிக்கிறது மற்றும் அதை ஒரு நிலையான மாறிக்கு ஒதுக்குகிறது.

3. ஹிஸ்டரி ஆப்ஜெக்ட்டை அணுகவும், வரலாறு எனப்படும் மாறிலிக்கு அதை ஒதுக்கவும் வரி 1 இல் இறக்குமதி செய்யப்பட்ட யூஸ்ஹிஸ்டரி ஹூக்கை இந்த வரி பயன்படுத்துகிறது.

4. இந்த வரி handleClick எனப்படும் செயல்பாட்டை அறிவிக்கிறது, இது தரவு எனப்படும் ஒரு வாதத்தை எடுத்து, வரலாற்றின் ஸ்டேக்கில் பாதையின் பெயர் மற்றும் நிலை பண்புகளைக் கொண்ட ஒரு பொருளைத் தள்ளுகிறது.

5. இந்த வரியானது onClick நிகழ்வு ஹேண்ட்லருடன் ஒரு பொத்தான் உறுப்பை வழங்குகிறது, அது ஒரு பயனரால் கிளிக் செய்யும் போது, ​​சில டேட்டாவைக் கொண்ட ஒரு பொருளைக் கொண்டு handleClick() ஐ அழைக்கிறது.

வரலாறு மிகுதி

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

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

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

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

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

ரியாக்ட் ரூட்டருடன் வரலாற்றைப் பயன்படுத்துவது, டெவலப்பர்கள் சக்திவாய்ந்த வழிசெலுத்தல் கூறுகளை உருவாக்குவதை எளிதாக்குகிறது, இது பயனர்கள் புரிந்துகொள்ளவும் தொடர்பு கொள்ளவும் எளிதாக இருக்கும்.

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

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