રીએક્ટ રાઉટર હિસ્ટરી, પુશમાં ડેટા પાસ કરવા સંબંધિત મુખ્ય સમસ્યા એ છે કે સમગ્ર પેજ રિફ્રેશમાં ડેટા ચાલુ રહેતો નથી. જ્યારે વપરાશકર્તા પૃષ્ઠને તાજું કરે છે, ત્યારે 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. આ લાઇન રીએક્ટ-રાઉટર-ડોમ લાઇબ્રેરીમાંથી useHistory હૂકને આયાત કરે છે, જે ઇતિહાસ ઑબ્જેક્ટની ઍક્સેસ પ્રદાન કરે છે જે એપ્લિકેશનમાં વર્તમાન સ્થાનનો ટ્રૅક રાખે છે.
2. આ લાઇન MyComponent નામના કાર્યાત્મક ઘટકને જાહેર કરે છે અને તેને સતત ચલને સોંપે છે.
3. આ લાઇન ઇતિહાસ ઑબ્જેક્ટની ઍક્સેસ મેળવવા માટે લાઇન 1 માં આયાત કરેલ useHistory હૂકનો ઉપયોગ કરે છે અને તેને ઇતિહાસ નામના સતત ચલને સોંપે છે.
4. આ લાઇન હેન્ડલક્લિક નામનું ફંક્શન જાહેર કરે છે જે ડેટા નામની દલીલ લે છે અને history.push() નો ઉપયોગ કરીને પાથનામ અને સ્ટેટ પ્રોપર્ટીઝ ધરાવતા ઑબ્જેક્ટને હિસ્ટરી સ્ટેક પર દબાણ કરે છે.
5. આ લાઇન onClick ઇવેન્ટ હેન્ડલર સાથે બટન એલિમેન્ટ આપે છે જે વપરાશકર્તા દ્વારા ક્લિક કરવામાં આવે ત્યારે તેની દલીલ તરીકે someData ધરાવતા ઑબ્જેક્ટ સાથે handleClick()ને કૉલ કરે છે.
ઇતિહાસ દબાણ
રિએક્ટ રાઉટરમાં હિસ્ટ્રી પુશ એ એક એવી પદ્ધતિ છે જેનો ઉપયોગ પૃષ્ઠને રિફ્રેશ કર્યા વિના બ્રાઉઝરમાં URL ને પ્રોગ્રામેટિકલી બદલવા માટે થાય છે. તે વિકાસકર્તાઓને સિંગલ-પેજ એપ્લિકેશન્સ બનાવવાની મંજૂરી આપે છે જે હજી પણ નેવિગેશન અને ડીપ લિંકિંગને હેન્ડલ કરવામાં સક્ષમ છે. હિસ્ટ્રી પુશ બ્રાઉઝરના ઇતિહાસ API નો ઉપયોગ કરીને કામ કરે છે, જે વિકાસકર્તાઓને પૃષ્ઠને ફરીથી લોડ કર્યા વિના વર્તમાન URL ને ચાલાકી કરવાની મંજૂરી આપે છે. આનાથી વપરાશકર્તાઓ દરેક વખતે ફરીથી લોડ કર્યા વિના એપ્લિકેશનના વિવિધ પૃષ્ઠો વચ્ચે નેવિગેટ કરવાનું શક્ય બનાવે છે. વધુમાં, તેનો ઉપયોગ ડીપ લિન્કિંગ માટે થઈ શકે છે, જે વપરાશકર્તાઓને એપ્લિકેશનના ચોક્કસ ભાગોમાં સીધા લિંક કરવાની મંજૂરી આપે છે.
પ્રતિક્રિયા રાઉટરમાં હું ઇતિહાસનો ઉપયોગ કેવી રીતે કરી શકું
રિએક્ટ રાઉટર તમારી પ્રતિક્રિયા એપ્લિકેશનમાં ઇતિહાસનો ઉપયોગ કરવાની રીત પ્રદાન કરે છે. ઈતિહાસ તમને વર્તમાન પૃષ્ઠ તેમજ મુલાકાત લીધેલ કોઈપણ પાછલા પૃષ્ઠોનો ટ્રૅક રાખવાની મંજૂરી આપે છે. નેવિગેશન બનાવવા અને વપરાશકર્તાની ક્રિયાઓનો ટ્રૅક રાખવા માટે આ ઉપયોગી છે.
રિએક્ટ રાઉટરમાં ઈતિહાસનો ઉપયોગ કરવા માટે, તમારે ઈતિહાસ પેકેજમાંથી createHistory() પદ્ધતિનો ઉપયોગ કરીને ઈતિહાસ ઑબ્જેક્ટ બનાવવાની જરૂર છે. આ તમને પુશ(), રિપ્લેસ(), અને ગો() જેવી પદ્ધતિઓની ઍક્સેસ આપશે. આ પદ્ધતિઓ તમને બ્રાઉઝરના URL ને હેરફેર કરવા અને તમારી એપ્લિકેશનમાં વિવિધ રૂટ્સ વચ્ચે નેવિગેટ કરવાની મંજૂરી આપે છે. તમે URL માં ફેરફારો સાંભળવા અને તે મુજબ તમારી એપ્લિકેશન અપડેટ કરવા માટે listen() પદ્ધતિનો પણ ઉપયોગ કરી શકો છો.
એકવાર તમે હિસ્ટ્રી ઑબ્જેક્ટ બનાવી લો તે પછી, તમે તેને બનાવતી વખતે તમારા રાઉટર ઘટકમાં પાસ કરી શકો છો. આનાથી રિએક્ટ રાઉટર યુઝર્સ દ્વારા કરવામાં આવેલા તમામ ફેરફારો પર નજર રાખી શકશે અને તે મુજબ અપડેટ કરી શકશે.
રિએક્ટ રાઉટર સાથે ઇતિહાસનો ઉપયોગ કરવાથી વિકાસકર્તાઓ માટે શક્તિશાળી નેવિગેશન ઘટકો બનાવવાનું સરળ બને છે જે વપરાશકર્તાઓને સમજવા અને તેની સાથે ક્રિયાપ્રતિક્રિયા કરવામાં સરળ હોય છે.
