निराकरण: इतिहास प्रतिक्रिया राउटर 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>   ); }

// हा कोड रिअॅक्ट-राउटर-डोम लायब्ररीमधून BrowserRouter, Switch, Route आणि useHistory घटक आयात करतो.
// ते नंतर अॅप नावाचे फंक्शन तयार करते जे हिस्ट्री ऑब्जेक्ट तयार करण्यासाठी useHistory हुक वापरते.
// हे हिस्ट्री ऑब्जेक्ट हँडलक्लिक नावाच्या फंक्शनमध्ये वापरले जाते जे कॉल केल्यावर हिस्ट्री स्टॅकवर नवीन एंट्री पुश करते.
// अॅप फंक्शन नंतर काही JSX परत करते ज्यात ऑनक्लिक हँडलर असलेले बटण समाविष्ट असते जे क्लिक केल्यावर हँडलक्लिक कॉल करते.
// शेवटी, त्याच्या आत एक रूट घटक असलेला एक स्विच घटक आहे जो जेव्हा त्याचा मार्ग “/new-location” शी जुळतो तेव्हा NewLocation घटक रेंडर करतो.

useHistory म्हणजे काय

useHistory हे रिएक्ट राउटरद्वारे प्रदान केलेले रिएक्ट हुक आहे जे घटकांना प्रोग्रामॅटिक पद्धतीने नेव्हिगेट करण्यासाठी इतिहास ऑब्जेक्टमध्ये प्रवेश करण्यास अनुमती देते. याचा वापर इतिहासाच्या स्टॅकवर नवीन स्थाने पुश करण्यासाठी, वर्तमान स्थान पुनर्स्थित करण्यासाठी, इतिहासात मागे-पुढे जाण्यासाठी, इ.

मी प्रतिक्रियेत मार्ग इतिहास कसा मिळवू शकतो

React Router मध्ये, useHistory हुक वापरून तुम्ही रूट हिस्ट्री मिळवू शकता. हा हुक इतिहासाच्या उदाहरणामध्ये प्रवेश देतो ज्याचा वापर तुम्ही नेव्हिगेट करण्यासाठी, तुमच्या अॅपच्या इतिहासात पुढे आणि पुढे जाण्यासाठी आणि बरेच काही करण्यासाठी करू शकता. ते वापरण्‍यासाठी, रिएक्‍ट राउटरमधून हुक इंपोर्ट करा आणि नंतर तुमच्या घटकामध्ये कॉल करा:

'react-router-dom' वरून { useHistory } आयात करा;

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

// आता तुम्ही `इतिहास` ऑब्जेक्टद्वारे मार्ग इतिहासात प्रवेश करू शकता.

परत (…);
}

प्रतिक्रिया राउटर इतिहास API वापरते

होय, वर्तमान स्थान आणि त्याच्या इतिहासाचा मागोवा ठेवण्यासाठी प्रतिक्रिया राउटर HTML5 इतिहास API वापरते. हे रिअॅक्ट राउटरला पृष्ठ रीलोड न करता अपडेट करण्याची अनुमती देते, नेव्हिगेशन जलद आणि नितळ बनवते. हिस्ट्री एपीआय डीप लिंकिंगसाठी देखील अनुमती देते, ज्यामुळे वापरकर्त्यांना लिंक शेअर करणे सोपे होते जे त्यांना थेट अॅप्लिकेशनमधील विशिष्ट पृष्ठावर घेऊन जातात.