தீர்க்கப்பட்டது: ரியாக்ட் ரூட்டர் v6 மூலம் திருப்பிவிடப்பட்டது

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

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

<Redirect to="/home" />

1. இந்த வரி react-router-dom நூலகத்தில் இருந்து வழிமாற்று கூறுகளை இறக்குமதி செய்கிறது.

2. இந்த வரி ஒரு வழிமாற்று கூறுகளை வழங்குகிறது, இது பயனரை "/ஹோம்" வழிக்கு திருப்பிவிடும்.

ரியாக்ட் ரூட்டர் v6 இல் நான் எப்படி திருப்பி விடுவது

v6

ரியாக்ட் ரூட்டர் v6 என்ற புதிய கூறுகளை வழங்குகிறது பயனர்களை ஒரு பக்கத்திலிருந்து மற்றொரு பக்கத்திற்கு திருப்பிவிட இது பயன்படுகிறது. இதைப் பயன்படுத்த, நீங்கள் react-router-dom தொகுப்பிலிருந்து Redirect கூறுகளை இறக்குமதி செய்து, பின்னர் அதை உங்கள் வழி கட்டமைப்பில் பயன்படுத்த வேண்டும். 'from' prop இல் குறிப்பிடப்பட்டுள்ள பாதையை ஒரு பயனர் பார்வையிடும் போது, ​​'to' prop இல் குறிப்பிடப்பட்டுள்ள பாதைக்கு அவர்கள் திருப்பி விடப்படுவார்கள். உதாரணத்திற்கு:

'react-router-dom' இலிருந்து {Redirect} இறக்குமதி செய்;
} />

உள்நுழைந்த பிறகு ரியாக்ட் ரூட்டர் v6 இல் எப்படி திருப்பி விடுவது

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

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

{
(உள்நுழைந்திருந்தால்) {
திரும்ப ;
} வேறு {
திரும்ப ;
}
}} />

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

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

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

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

{isLoggedIn ? : }

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

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

ரியாக்ட் ரூட்டரில் 5 வினாடிகளுக்குப் பிறகு திருப்பிவிட, நீங்கள் setTimeout() செயல்பாட்டைப் பயன்படுத்தி history.push() முறையை வாதமாக விரும்பிய வழியுடன் அழைக்கலாம்.

உதாரணமாக:
"react-router-dom" இலிருந்து {useHistory} ஐ இறக்குமதி செய்யவும்;
const வரலாறு = useHistory();
setTimeout(() => {
history.push(“/redirectedPage”);
}, 5000);