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

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

In React Router v6, you can use the <Redirect> component to redirect from one page to another.

Example: 

import { Redirect } from 'react-router-dom'; 
 
<Route exact path="/old-path"> 
   <Redirect to="/new-path" /> 
</Route>

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

2.
- இந்த வரியானது "/பழைய பாதை" என்ற சரியான பாதையுடன் ஒரு பாதை கூறுகளை உருவாக்குகிறது.

3.
- இந்த வரி "/பழைய-பாதை" இலிருந்து "/புதிய-பாதை" க்கு திருப்பிவிட வழிமாற்று கூறுகளைப் பயன்படுத்துகிறது.

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

v6

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

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

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

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

வினையில் உள்ள திசைவியின் வகைகள்

ரியாக்ட் ரூட்டர் என்பது ரியாக்டிற்கான ஒரு ரூட்டிங் லைப்ரரி ஆகும், இது டெவலப்பர்கள் வழிசெலுத்தல் மற்றும் URL ரூட்டிங் மூலம் ஒற்றை-பக்க பயன்பாடுகளை உருவாக்க அனுமதிக்கிறது. இது மூன்று வகையான ரவுட்டர்களை வழங்குகிறது: BrowserRouter, HashRouter மற்றும் MemoryRouter.

BrowserRouter: இந்த திசைவி உங்கள் UI ஐ URL உடன் ஒத்திசைக்க HTML5 வரலாற்று API ஐப் பயன்படுத்துகிறது. உங்கள் பயன்பாட்டில் உண்மையான URLகளைப் பயன்படுத்த விரும்பும் போது இது பயன்படுத்தப்படுகிறது.

HashRouter: இந்த திசைவி உங்கள் UI ஐ URL உடன் ஒத்திசைக்க, URL இன் ஹாஷ் பகுதியை (அதாவது #) பயன்படுத்துகிறது. நீங்கள் உண்மையான URLகளைப் பயன்படுத்த விரும்பாதபோது அல்லது HTML5 வரலாற்று APIயை ஆதரிக்காத பழைய உலாவிகளுடன் இணக்கத்தன்மை தேவைப்படும்போது இது பயன்படுத்தப்படுகிறது.

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