ઉકેલાયેલ: પાસ ડેટા નેવિગેટ રીએક્ટ રાઉટર ડોમ

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

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

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

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// લાઇન 1: આ લાઇન રીએક્ટ-રાઉટર-ડોમ લાઇબ્રેરીમાંથી useHistory હૂક આયાત કરે છે.
// લાઇન 3: આ લાઇન MyComponent નામના કોન્સ્ટન્ટને જાહેર કરે છે જે એક ફંક્શન છે જે JSX પરત કરે છે.
// લાઈન 4: આ લીટી ઈતિહાસ તરીકે ઓળખાતા કોન્સ્ટન્ટની ઘોષણા કરે છે જે રીએક્ટ-રાઉટર-ડોમમાંથી ઈમ્પોર્ટ કરવામાં આવેલ UseHistory હૂકને સોંપવામાં આવે છે.
// લાઇન 6: આ લાઇન હેન્ડલક્લિક નામનું ફંક્શન જાહેર કરે છે જે એક પેરામીટર, ડેટા લે છે.
// લાઇન 7: આ લાઇન પાથનેમ '/myroute' સાથે સ્ટેક પર નવા રૂટને આગળ ધકેલવા માટે ઇતિહાસ ઑબ્જેક્ટનો ઉપયોગ કરે છે અને ઑબ્જેક્ટ તરીકે પસાર થયેલ સ્ટેટ ડેટા.
// લાઇન્સ 9 – 11: આ રેખાઓ JSX પરત કરે છે જેમાં onClick ઇવેન્ટ હેન્ડલર સાથે બટન એલિમેન્ટ હોય છે જે હેન્ડલક્લિકને કૉલ કરે છે અને દલીલ તરીકે ડેટા પાસ કરે છે.

પ્રતિક્રિયા રાઉટર ડોમ

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

તમે પ્રતિક્રિયા-રાઉટર-ડોમમાં નેવિગેટ દ્વારા ડેટા કેવી રીતે પસાર કરશો

રિએક્ટ રાઉટરમાં, હિસ્ટ્રી API ના સ્ટેટ ઑબ્જેક્ટનો ઉપયોગ કરીને નેવિગેશન દ્વારા ડેટા પસાર કરી શકાય છે. સ્ટેટ ઑબ્જેક્ટ એ દ્વારા પ્રસ્તુત કોઈપણ ઘટકના પ્રોપ્સ દ્વારા સુલભ છે ઘટક ડેટા પાસ કરવા માટે, નેવિગેટ ફંક્શનને કૉલ કરતી વખતે તમે તેને સ્ટેટ ઑબ્જેક્ટમાં ઉમેરી શકો છો. દાખ્લા તરીકે:

const { history } = this.props;
history.push({
પાથનામ: '/some/path',
રાજ્ય: { someData: 'data' }
});