حل ہوا: ڈاؤن لوڈ ری ایکٹ روٹر ڈوم

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

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

ReactDOM.render(
  <Router>
    <Route path="/">
      <App />
    </Route>
  </Router>, 
  document.getElementById('root'));

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

2. "ReactDOM.render(" - یہ لائن ReactDOM رینڈر طریقہ کو کہتی ہے کہ فراہم کردہ کنٹینر میں ایک React عنصر کو DOM میں رینڈر کیا جائے اور جزو کا حوالہ واپس کیا جائے (یا سٹیٹ لیس اجزاء کے لیے null لوٹاتا ہے)۔

3. "” – یہ راؤٹر کے جزو کے لیے ایک افتتاحی ٹیگ ہے جو ہماری ایپلیکیشن کے لیے روٹنگ کی فعالیت فراہم کرنے کے لیے ہمارے تمام راستوں کو سمیٹنے کے لیے استعمال کیا جائے گا۔

4. "” – یہ روٹ کے جزو کے لیے ایک افتتاحی ٹیگ ہے جو ہماری درخواست کے اندر ایک واحد راستے کی وضاحت کے لیے استعمال کیا جائے گا جو '/' پر کی گئی کسی بھی درخواست سے مماثل ہوگا۔

5. "” – یہ ایک سیلف کلوزنگ ٹیگ ہے جو ہمارے DOM ٹری میں ایپ کا ایک جزو پیش کرتا ہے جب اس راستے کو ری ایکٹ راؤٹر ڈوم سے ملایا جاتا ہے۔
ایپ کا جزو کوئی بھی رد عمل کا جزو ہو سکتا ہے جسے ہم نے اپنے کوڈ بیس میں کہیں اور بیان کیا ہو یا کسی اور لائبریری یا پیکیج سے درآمد کیا ہو جیسے میٹریل UI یا بوٹسٹریپ وغیرہ…

6. “” – یہ روٹ کے اجزاء کے لیے ایک اختتامی ٹیگ ہے جو اوپر لائن 4 پر کھولا گیا تھا، یہ اس مخصوص روٹ کی تعریف کو بند کر دیتا ہے تاکہ بعد میں ضرورت پڑنے پر ہمارے کوڈبیس میں اس کی فعالیت یا رویے کو متاثر کیے بغیر دیگر راستوں کو شامل کیا جا سکے۔ .

7. “” – یہ راؤٹر کے اجزاء کے لیے ایک اختتامی ٹیگ ہے جو اوپر کی لائن 3 پر کھولا گیا تھا، یہ اس مخصوص راؤٹر کی تعریف کو بند کر دیتا ہے تاکہ ضرورت پڑنے پر ہمارے کوڈ بیس میں اس کی فعالیت یا رویے کو متاثر کیے بغیر دوسرے راؤٹرز کو شامل کیا جا سکے۔ ..

8."document.getElementById('root'))؛" - آخر میں، ہم دستاویز getElementById('root') کو ReactDOM رینڈر کے طریقہ کار کی دلیل کے طور پر پاس کرتے ہیں جو یہ بتاتا ہے کہ ہم DOM درخت کے اندر ایپ کو کہاں ماؤنٹ/رینڈر کرنا چاہتے ہیں (اس معاملے میں id=" والے عنصر کے اندر۔ جڑ")۔

react-router-dom پیکیج

React Router React کے لیے ایک مقبول روٹنگ لائبریری ہے۔ یہ ایپلیکیشن روٹس اور نیویگیشن کے انتظام کے لیے ایک طاقتور، استعمال میں آسان API فراہم کرتا ہے۔ react-router-dom پیکیج ویب ایپلیکیشنز کے لیے React Router کا آفیشل ورژن ہے۔ یہ اس طرح کے اجزاء فراہم کرتا ہے اور اپنی ایپ میں روٹنگ کا نظم کرنے میں مدد کرنے کے لیے۔ اس میں آپ کے اجزاء کے اندر سے موجودہ روٹ کی معلومات تک رسائی کے لیے UseHistory، useLocation، اور useParams جیسے ہکس بھی شامل ہیں۔ react-router-dom کے ساتھ آپ URL پیرامیٹرز، استفسار کے تار، یا حسب ضرورت منطق کی بنیاد پر آسانی سے متحرک راستے بنا سکتے ہیں۔ آپ اپنی ایپلیکیشن کے نیویگیشن ڈھانچے پر مزید دانے دار کنٹرول فراہم کرنے کے لیے متحرک حصوں کے ساتھ نیسٹڈ روٹس بھی بنا سکتے ہیں۔

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

1. ری ایکٹ راؤٹر ڈوم انسٹال کریں:
اپنی پروجیکٹ ڈائرکٹری میں، React Router Dom کو انسٹال کرنے کے لیے درج ذیل کمانڈ کو چلائیں:
`npm install react-router-dom`

2. ری ایکٹ راؤٹر ڈوم درآمد کریں:
ایک بار جب آپ React Router Dom انسٹال کر لیتے ہیں، تو آپ اسے اپنے پروجیکٹ میں درج ذیل کوڈ کے ساتھ امپورٹ کر سکتے ہیں۔
`Raact-router-dom' سے { BrowserRouter کو روٹر، Route } کے طور پر درآمد کریں`

3. روٹ کا جزو بنائیں:
اس کے بعد، ایک روٹ جزو بنائیں جو صفحہ کو رینڈر کرے گا جب صارف مخصوص راستے پر جائے گا۔ مثال کے طور پر، اگر آپ کسی صفحہ کو اس وقت رینڈر کرنا چاہتے ہیں جب آپ کی درخواست میں کوئی /گھر جاتا ہے، تو آپ درج ذیل کوڈ استعمال کر سکتے ہیں:
``

4. اپنی ایپ کو راؤٹر کے اجزاء سے لپیٹیں:
آخر میں، اپنی ایپ کو راؤٹر کے جزو کے ساتھ لپیٹیں تاکہ آپ کے تمام راستے درست طریقے سے پیش کیے جائیں۔ آپ اپنی روٹ فائل (عام طور پر index.js) میں درج ذیل کوڈ کا استعمال کرکے ایسا کر سکتے ہیں: ` `.