حل ہوا: رد عمل کا روٹر اگلے صفحے کے اوپر

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

import { useRouter } from 'react-router-dom';

const NextPage = () => {
  const router = useRouter();

  const handleClick = () => {
    router.push('/next-page');
  };

  return (
    <div>
      <button onClick={handleClick}>Go to next page</button>
    </div>  
  );  
};

// لائن 1: یہ لائن رییکٹ-روٹر-ڈوم لائبریری سے UseRouter ہک درآمد کرتی ہے۔
// لائن 3: یہ لائن نیکسٹ پیج نامی ایک فنکشن کا اعلان کرتی ہے جو ایک React جز کو لوٹاتا ہے۔
// لائن 4: یہ لائن روٹر نامی ایک متغیر کا اعلان کرتی ہے اور اسے UseRouter ہک کو تفویض کرتی ہے۔
// لائن 6: یہ لائن ایک فنکشن کا اعلان کرتی ہے جسے ہینڈل کلک کہتے ہیں جو روٹر کے پش میتھڈ کو '/next-page' کی دلیل کے ساتھ کال کرتا ہے۔
// لائنز 8-11: یہ لائنیں ایک بٹن عنصر کے ساتھ ایک React جزو لوٹاتی ہیں جس میں onClick پروپ ہینڈل کلک پر سیٹ ہوتا ہے۔ کلک کرنے پر، یہ ہینڈل کلک فنکشن کو کال کرے گا اور '/اگلا صفحہ' پر تشریف لے جائے گا۔

صفحات کے درمیان نیویگیٹ کریں۔

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

ScrollToTop یا اگلا صفحہ ٹاپ

ScrollToTop React Router میں ایک خصوصیت ہے جو صارفین کو مختلف راستوں کے درمیان نیویگیٹ کرتے وقت تیزی سے صفحہ کے اوپری حصے تک واپس سکرول کرنے کی اجازت دیتی ہے۔ یہ خاص طور پر بہت سارے مواد والے لمبے صفحات کے لیے مفید ہے، کیونکہ یہ صارفین کو دستی طور پر اسکرول کیے بغیر تیزی سے اوپر کی طرف جانے کی اجازت دیتا ہے۔ نیکسٹ پیج ٹاپ ایک ایسی ہی خصوصیت ہے جو اسی طرح کام کرتی ہے لیکن بیک اپ سکرول کرنے کے بجائے، راستوں کے درمیان نیویگیٹ کرتے وقت یہ آپ کو براہ راست اگلے صفحے پر لے جاتی ہے۔ یہ خاص طور پر ان صارفین کے لیے مددگار ثابت ہو سکتا ہے جو کسی مخصوص صفحہ پر مخصوص معلومات تلاش کر رہے ہیں اور وہاں پہنچنے سے پہلے دوسرے صفحات پر موجود تمام مواد کو اسکرول نہیں کرنا چاہتے۔ دونوں خصوصیات بہترین اضافہ ہیں جو صارف کے تجربے کو بہتر بنانے اور نیویگیشن کو آسان اور تیز تر بنانے میں مدد کرتی ہیں۔