ઉકેલી: ઇતિહાસ પ્રતિક્રિયા રાઉટર v6 એપ્લિકેશનનો ઉપયોગ કરો

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

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useHistory,
} from "react-router-dom";

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// આ કોડ રિએક્ટ-રાઉટર-ડોમ લાઇબ્રેરીમાંથી બ્રાઉઝર રાઉટર, સ્વિચ, રૂટ અને યુઝ હિસ્ટ્રી ઘટકોને આયાત કરે છે.
// તે પછી એપ નામનું ફંક્શન બનાવે છે જે હિસ્ટ્રી ઓબ્જેક્ટ બનાવવા માટે useHistory હૂકનો ઉપયોગ કરે છે.
// આ હિસ્ટ્રી ઓબ્જેક્ટનો ઉપયોગ હેન્ડલક્લિક નામના ફંક્શનમાં થાય છે જે જ્યારે કૉલ કરવામાં આવે ત્યારે ઇતિહાસ સ્ટેક પર નવી એન્ટ્રીને દબાણ કરે છે.
// એપ ફંક્શન પછી અમુક JSX પરત કરે છે જેમાં onClick હેન્ડલર સાથેનું એક બટન હોય છે જે ક્લિક કરવામાં આવે ત્યારે હેન્ડલક્લિકને કૉલ કરે છે.
// છેલ્લે, તેની અંદર એક રૂટ ઘટક સાથે એક સ્વિચ ઘટક છે જે જ્યારે તેનો પાથ “/new-location” સાથે મેળ ખાતો હોય ત્યારે NewLocation ઘટકને રેન્ડર કરે છે.

ઉપયોગ ઇતિહાસ શું છે

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

હું પ્રતિક્રિયામાં રૂટ ઇતિહાસ કેવી રીતે મેળવી શકું

રિએક્ટ રાઉટરમાં, તમે UseHistory હૂકનો ઉપયોગ કરીને રૂટ હિસ્ટ્રી મેળવી શકો છો. આ હૂક ઇતિહાસના દાખલાની ઍક્સેસ આપે છે જેનો ઉપયોગ તમે નેવિગેટ કરવા, તમારી એપ્લિકેશનના ઇતિહાસમાં આગળ અને પાછળ જવા માટે અને વધુ કરવા માટે કરી શકો છો. તેનો ઉપયોગ કરવા માટે, ફક્ત પ્રતિક્રિયા રાઉટરમાંથી હૂક આયાત કરો અને પછી તેને તમારા ઘટકમાં કૉલ કરો:

'react-router-dom' માંથી { useHistory } આયાત કરો;

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

// હવે તમે `ઇતિહાસ` ઑબ્જેક્ટ દ્વારા રૂટ ઇતિહાસને ઍક્સેસ કરી શકો છો.

પરત (…);
}

શું પ્રતિક્રિયા રાઉટર ઇતિહાસ API નો ઉપયોગ કરે છે

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