حل شدہ: ہسٹری ری ایکٹ راؤٹر v6 ایپ استعمال کریں۔

ہسٹری ری ایکٹ راؤٹر v6 کے استعمال سے متعلق بنیادی مسئلہ یہ ہے کہ یہ ہیش بیسڈ روٹنگ کو سپورٹ نہیں کرتا ہے۔ اس کا مطلب یہ ہے کہ تمام یو آر ایل کو مطلق راستے ہونے چاہئیں، جس کی وجہ سے ایپلیکیشن کا انتظام اور اسے برقرار رکھنا مشکل ہو سکتا ہے۔ مزید برآں، متحرک راستوں کے لیے کوئی بلٹ ان سپورٹ نہیں ہے، جو متعدد صفحات کے ساتھ پیچیدہ ایپلی کیشنز بناتے وقت ایک مسئلہ ہو سکتا ہے۔ آخر میں، ہسٹری ری ایکٹ راؤٹر 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>   ); }

// یہ کوڈ React-router-dom لائبریری سے BrowserRouter، Switch، Route، اور useHistory کے اجزاء درآمد کرتا ہے۔
// پھر یہ ایپ نامی ایک فنکشن بناتا ہے جو ہسٹری آبجیکٹ بنانے کے لیے useHistory ہک کا استعمال کرتا ہے۔
// اس ہسٹری آبجیکٹ کو ہینڈل کلک نامی فنکشن میں استعمال کیا جاتا ہے جو ہسٹری اسٹیک پر ایک نئی انٹری کو دھکیلتا ہے جب اسے کال کیا جاتا ہے۔
// ایپ فنکشن پھر کچھ JSX لوٹاتا ہے جس میں ایک onClick ہینڈلر کے ساتھ ایک بٹن شامل ہوتا ہے جو کلک کرنے پر ہینڈل کلک کو کال کرتا ہے۔
// آخر میں، اس کے اندر ایک روٹ جزو کے ساتھ ایک سوئچ جزو ہے جو نیو لوکیشن جزو کو اس وقت پیش کرتا ہے جب اس کا راستہ "/نئے مقام" سے میل کھاتا ہے۔

UseHistory کیا ہے؟

useHistory ایک React Hook ہے جو React Router کے ذریعے فراہم کیا جاتا ہے جو پروگرام کے لحاظ سے نیویگیٹ کرنے کے لیے اجزاء کو ہسٹری آبجیکٹ تک رسائی کی اجازت دیتا ہے۔ اس کا استعمال نئے مقامات کو ہسٹری اسٹیک میں ڈالنے، موجودہ مقام کو تبدیل کرنے، تاریخ میں آگے پیچھے جانے وغیرہ کے لیے کیا جا سکتا ہے۔

میں رد عمل میں راستے کی تاریخ کیسے حاصل کروں؟

ری ایکٹ راؤٹر میں، آپ UseHistory ہک کا استعمال کرکے روٹ ہسٹری حاصل کرسکتے ہیں۔ یہ ہک تاریخ کی مثال تک رسائی فراہم کرتا ہے جسے آپ نیویگیٹ کرنے، اپنی ایپ کی سرگزشت میں آگے پیچھے جانے اور مزید بہت کچھ کرنے کے لیے استعمال کر سکتے ہیں۔ اسے استعمال کرنے کے لیے، صرف React Router سے ہک درآمد کریں اور پھر اسے اپنے جزو میں کال کریں:

'react-router-dom' سے { useHistory } درآمد کریں؛

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

// اب آپ `ہسٹری` آبجیکٹ کے ذریعے روٹ ہسٹری تک رسائی حاصل کر سکتے ہیں۔

واپسی (…)؛
}

کیا روٹر کے استعمال کی تاریخ API کا رد عمل ظاہر کرتا ہے۔

ہاں، React Router موجودہ مقام اور اس کی سرگزشت پر نظر رکھنے کے لیے HTML5 ہسٹری API کا استعمال کرتا ہے۔ یہ ری ایکٹ راؤٹر کو صفحہ کو دوبارہ لوڈ کیے بغیر اپ ڈیٹ کرنے کی اجازت دیتا ہے، جس سے نیویگیشن تیز اور ہموار ہو جاتی ہے۔ ہسٹری API گہری لنکنگ کی بھی اجازت دیتا ہے، جو صارفین کے لیے ایسے لنکس کا اشتراک کرنا آسان بناتا ہے جو انہیں براہ راست کسی ایپلیکیشن میں کسی مخصوص صفحہ پر لے جاتے ہیں۔