ઉકેલાયેલ: પ્રતિક્રિયા રાઉટર v6 સાથે રીડાયરેક્ટ

રીએક્ટ રાઉટર v6 સાથે રીડાયરેક્ટ સંબંધિત મુખ્ય સમસ્યા એ છે કે જ્યારે રીડાયરેક્ટ થાય ત્યારે ઘટક રી-રેન્ડર થતું નથી. આનો અર્થ એ છે કે જ્યારે રીડાયરેક્ટ થાય ત્યારે ઘટક સાથે સંકળાયેલ કોઈપણ સ્થિતિ અથવા પ્રોપ્સ અપડેટ કરવામાં આવશે નહીં, અને તે મૂલ્યોમાં કરવામાં આવેલ કોઈપણ ફેરફારો નવા પૃષ્ઠમાં પ્રતિબિંબિત થશે નહીં. વધુમાં, React રાઉટર v6 ક્વેરી સ્ટ્રિંગને સપોર્ટ કરતું ન હોવાથી, URL માં પાસ કરેલ કોઈપણ ક્વેરી પેરામીટર પણ રીડાયરેક્ટ દરમિયાન ખોવાઈ જશે.

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

<Redirect to="/home" />

1. આ લાઇન રીએક્ટ-રાઉટર-ડોમ લાઇબ્રેરીમાંથી રીડાયરેક્ટ ઘટકને આયાત કરે છે.

2. આ લાઇન રીડાયરેક્ટ ઘટક રેન્ડર કરે છે, જે વપરાશકર્તાને “/home” રૂટ પર રીડાયરેક્ટ કરશે.

હું રીએક્ટ રાઉટર v6 માં કેવી રીતે રીડાયરેક્ટ કરી શકું

v6

રીએક્ટ રાઉટર v6 નામનું નવું ઘટક પૂરું પાડે છે જેનો ઉપયોગ વપરાશકર્તાઓને એક પૃષ્ઠથી બીજા પૃષ્ઠ પર રીડાયરેક્ટ કરવા માટે કરી શકાય છે. તેનો ઉપયોગ કરવા માટે, તમારે ફક્ત react-router-dom પેકેજમાંથી રીડાયરેક્ટ ઘટક આયાત કરવાની જરૂર છે અને પછી તમારા રૂટ રૂપરેખાંકનમાં તેનો ઉપયોગ કરો. જ્યારે વપરાશકર્તા 'ફ્રોમ' પ્રોપમાં ઉલ્લેખિત પાથની મુલાકાત લે છે, ત્યારે તેમને 'ટુ' પ્રોપમાં ઉલ્લેખિત પાથ પર રીડાયરેક્ટ કરવામાં આવશે. દાખ્લા તરીકે:

'react-router-dom' માંથી { રીડાયરેક્ટ } આયાત કરો;
} />

લૉગિન પછી હું રિએક્ટ રાઉટર v6 માં કેવી રીતે રીડાયરેક્ટ કરી શકું

સફળ લૉગિન પછી રીડાયરેક્ટ કરવું એ વેબ એપ્લિકેશન્સમાં એક સામાન્ય સુવિધા છે. પ્રતિક્રિયા રાઉટર v6 માં, તમે ઉપયોગ કરી શકો છો સફળ લોગિન પછી વપરાશકર્તાને રીડાયરેક્ટ કરવા માટેનો ઘટક.

આ કરવા માટે, તમારે એક રૂટ બનાવવાની જરૂર પડશે જે તપાસે છે કે શું વપરાશકર્તા લૉગ ઇન છે અને પછી તેને તે મુજબ રીડાયરેક્ટ કરે છે. દાખ્લા તરીકે:

{
જો (isLoggedIn) {
વળતર ;
} બીજું {
વળતર ;
}
}} />

આ ઉદાહરણમાં, અમે તપાસીએ છીએ કે શું વપરાશકર્તા લૉગ ઇન છે અને પછી કાં તો લૉગિનપેજ ઘટકને રેન્ડર કરી રહ્યાં છીએ અથવા તેમને /ડૅશબોર્ડ પર રીડાયરેક્ટ કરી રહ્યાં છીએ. તમે રીડાયરેક્ટ ઘટકમાં પ્રોપ્સ પણ પસાર કરી શકો છો જેમ કે: આ તમને વપરાશકર્તાને રીડાયરેક્ટ કરવામાં આવે તે પહેલાં તે ક્યાં હતો તેનો ટ્રૅક રાખવા માટે પરવાનગી આપે છે.

હું કેવી રીતે પ્રતિક્રિયામાં આપમેળે રીડાયરેક્ટ કરી શકું

રિએક્ટ રાઉટર એક રીડાયરેક્ટ ઘટક પ્રદાન કરે છે જેનો ઉપયોગ અમુક શરતો પૂરી થાય ત્યારે આપમેળે વપરાશકર્તાઓને રીડાયરેક્ટ કરવા માટે થઈ શકે છે. તેનો ઉપયોગ કરવા માટે, તમારે પ્રોપ તરીકે તમે જે પાથ પર રીડાયરેક્ટ કરવા માંગો છો તેમાંથી પસાર થવું આવશ્યક છે. જો જરૂરી હોય તો તમે રાજ્ય અને/અથવા ક્વેરી પરિમાણો સાથે ઑબ્જેક્ટમાં પણ પસાર કરી શકો છો.

આપમેળે રીડાયરેક્ટ કરવા માટે, તમારે રૂટ ઘટકમાં ઘટકનો ઉપયોગ કરવાની જરૂર પડશે અને રીડાયરેક્ટ ક્યારે થવું જોઈએ તે માટેની શરત સેટ કરવી પડશે. ઉદાહરણ તરીકે, જો તમે વપરાશકર્તાઓને લિંક પર ક્લિક કર્યા પછી તમારી એપ્લિકેશનના હોમ પેજ પરથી લોગિન પેજ પર રીડાયરેક્ટ કરવા માંગતા હો, તો તમે આના જેવું કંઈક કરી શકો છો:

{isLoggedIn? : }

આ ઉદાહરણમાં, આપણે રીડાયરેક્શન ક્યારે કરવું જોઈએ તે માટેની અમારી શરત તરીકે isLoggedIn બુલિયન વેરીએબલ (જેને બીજે ક્યાંક સેટ કરવાની જરૂર પડશે) નો ઉપયોગ કરી રહ્યા છીએ. જો તે સાચું હોય, તો અમે અમારા હોમ ઘટકને રેન્ડર કરીએ છીએ; અન્યથા, અમે પુનઃદિશામાન કરીએ છીએ.

પ્રતિક્રિયામાં 5 સેકન્ડ પછી તમે કેવી રીતે રીડાયરેક્ટ કરશો

રિએક્ટ રાઉટરમાં 5 સેકન્ડ પછી રીડાયરેક્ટ કરવા માટે, તમે દલીલ તરીકે ઇચ્છિત રૂટ સાથે history.push() પદ્ધતિને કૉલ કરવા માટે setTimeout() ફંક્શનનો ઉપયોગ કરી શકો છો.

ઉદાહરણ:
"react-router-dom" માંથી { useHistory } આયાત કરો;
const history = useHistory();
setTimeout(() => {
history.push("/redirectedPage");
}, 5000);