حل ہوا: ActiveClassName ری ایکٹ روٹر

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

<Router>
  <Link to="/about" activeClassName="active">About</Link>
</Router>

1. React میں ایک راؤٹر بنانے کے لیے component کا استعمال کیا جاتا ہے جو صارفین کو مختلف صفحات کے درمیان نیویگیٹ کرنے کی اجازت دیتا ہے۔

2. component کا استعمال ایک لنک بنانے کے لیے کیا جاتا ہے جس پر کلک کرنے پر، صارف کو "to" انتساب میں بیان کردہ صفحہ پر لے جائے گا (اس معاملے میں، "/about")۔

3. ActiveClassName وصف یہ بتاتا ہے کہ جب لنک فعال ہو تو کس کلاس کو لاگو کیا جانا چاہیے (اس صورت میں، "فعال")۔

NavLink کیا ہے؟

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

ActiveClassName وصف

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

ActiveClassName کیوں کام نہیں کرے گا۔

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