حل شدہ: رد عمل روٹر ڈوم این پی ایم

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

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

<Router>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

1. "Raact-router-dom' سے { BrowserRouter کو روٹر، Route } کے طور پر درآمد کریں؛"
یہ لائن React-router-dom لائبریری سے BrowserRouter اور Route اجزاء درآمد کرتی ہے۔

2. ""
یہ لائن ایک راؤٹر جزو بناتی ہے جو ایپلیکیشن کے تمام راستوں کو سمیٹنے کے لیے استعمال کیا جائے گا۔

3. ""
یہ لائن روٹ کا ایک جزو بناتی ہے جو ہوم جز کو پیش کرے گا جب راستہ '/' ہو گا۔ 'عین' سہارا اس بات کو یقینی بناتا ہے کہ یہ راستہ صرف اس وقت مماثل ہوگا جب راستہ بالکل '/' ہو۔

4. "یہ لائن ایک روٹ جزو بناتی ہے جو اس کے بارے میں جز کو رینڈر کرے گا جب راستہ '/about' ہو گا۔

5۔ "" یہ لائن راؤٹر کے جزو کو بند کر دیتی ہے اور اس بات کا اشارہ دیتی ہے کہ ہمارے تمام راستوں کا اعلان کر دیا گیا ہے۔

این پی ایم پیکیج مینیجر

NPM (Node Package Manager) JavaScript کے لیے ایک پیکیج مینیجر ہے جو ڈویلپرز کو ان کی React ایپلیکیشنز کے لیے پیکیجز کو آسانی سے انسٹال، اپ ڈیٹ اور ان کا نظم کرنے میں مدد کرتا ہے۔ یہ React Router لائبریری کے لیے ڈیفالٹ پیکیج مینیجر ہے اور پیکجوں کی ایک وسیع رینج تک رسائی فراہم کرتا ہے جو React ایپلی کیشنز میں استعمال کیے جا سکتے ہیں۔ NPM ڈویلپرز کو فوری طور پر آفیشل رجسٹری کے ساتھ ساتھ دوسرے فریق ثالث ذرائع سے پیکجز تلاش کرنے اور انسٹال کرنے کی اجازت دیتا ہے۔ یہ مختلف پیکجوں کے درمیان انحصار کو منظم کرنے کے لیے ٹولز بھی فراہم کرتا ہے، جس سے یہ معلوم کرنا آسان ہو جاتا ہے کہ ایپلی کیشن میں ہر پیکج کے کون سے ورژن انسٹال ہیں۔ مزید برآں، NPM کو موجودہ پیکجوں کو آسانی سے اپ ڈیٹ کرنے کے لیے استعمال کیا جا سکتا ہے یا اگر ان کی مزید ضرورت نہ ہو تو ان کو ان انسٹال بھی کیا جا سکتا ہے۔

ری ایکٹ راؤٹر ڈوم کیا ہے؟

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

ڈوم این پی ایم ری ایکٹ راؤٹر کو کیسے انسٹال کریں۔

1. ری ایکٹ راؤٹر انسٹال کریں:
سب سے پہلے، این پی ایم یا یارن کا استعمال کرتے ہوئے ری ایکٹ راؤٹر پیکج انسٹال کریں۔
مثال کے طور پر، اگر آپ npm استعمال کر رہے ہیں:
npm install react-router-dom

2. ری ایکٹ راؤٹر درآمد کریں:
انسٹالیشن مکمل ہونے کے بعد، آپ کو اپنی ایپلیکیشن میں react-router-dom سے اجزاء درآمد کرنے کی ضرورت ہے۔ مثال کے طور پر:
'react-router-dom' سے { BrowserRouter بطور راؤٹر، روٹ } درآمد کریں؛

3. اپنی ایپ کو راؤٹر کے اجزاء میں لپیٹیں:
اگلا مرحلہ اپنے جڑ کے اجزاء کو a کے ساتھ لپیٹنا ہے۔ react-router-dom سے جزو۔ یہ آپ کی ایپلیکیشن کو روٹنگ کی صلاحیتوں کے ساتھ فراہم کرے گا اور اسے موجودہ URL پاتھ سے آگاہ کرے گا جس پر صارف جا رہا ہے۔ مثال کے طور پر:

const ایپ = () => (
 
 

    );

4. اپنی ایپ میں روٹس شامل کریں: آخری مرحلہ یہ ہے کہ استعمال کرکے اپنی ایپلیکیشن میں روٹس شامل کریں۔ ری ایکٹ راؤٹر ڈوم کے ذریعہ فراہم کردہ جزو۔ راستے کا جزو دو سہارے لیتا ہے۔ path اور component جو آپ کو یہ بتانے کی اجازت دیتا ہے کہ جب کوئی صارف آپ کی ایپلیکیشن میں کسی مخصوص URL پاتھ پر جاتا ہے تو کون سے اجزاء پیش کیے جائیں مثال کے طور پر:

const ایپ = () => (
 
 

   )