حل ہوا: ری ایکٹ راؤٹر سب کو پکڑنے کے لیے فال بیک شامل کریں۔

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

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

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Fallback route */}
      <Route component={NoMatch} /> 

    </Switch>
  </Router>  
);

// لائن 1: یہ لائن براؤزر راؤٹر، روٹ، اور سوئچ کے اجزاء کو ری ایکٹ-روٹر-ڈوم لائبریری سے درآمد کرتی ہے۔
// لائن 2: یہ لائن ایپ نامی ایک مستقل کی وضاحت کرتی ہے جو ایک فنکشن جزو ہے۔
// لائن 3: یہ لائن راؤٹر کے جزو کو react-router-dom سے پیش کرتی ہے۔
// لائن 4: یہ لائن react-router-dom سے سوئچ جز کو پیش کرتی ہے۔
// لائنز 5 اور 6: یہ لائنیں روٹ کے دو اجزاء کو درست راستوں اور اجزاء کے ساتھ رینڈر کرتی ہیں جب وہ راستے مماثل ہوتے ہیں۔
// لائن 8: اگر دوسرے راستوں میں سے کوئی بھی مماثل نہیں ہے تو یہ لائن فال بیک روٹ پیش کرتی ہے۔ یہ NoMatch جزو رینڈر کرے گا اگر کوئی دوسرے راستے میچ نہیں کرتے ہیں۔

ری ایکٹ راؤٹر کیا ہے؟

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

تمام فال بیک روٹ پکڑیں۔

کیچ آل فال بیک روٹ ری ایکٹ راؤٹر میں ایک روٹ ہے جو کسی ایسے راستے سے میل کھاتا ہے جو کسی دوسرے راستوں سے نہ ملا ہو۔ اس قسم کا روٹ اکثر 404 صفحہ بنانے، یا تمام بے مثال راستوں کے لیے ایک جزو پیش کرنے کے لیے استعمال ہوتا ہے۔ یہ نوٹ کرنا ضروری ہے کہ کیچ آل فال بیک روٹ ہمیشہ راستوں کی فہرست میں آخری راستہ ہونا چاہیے، کیونکہ یہ کسی بھی راستے سے میل کھاتا ہے اور دوسرے راستوں کو مماثل ہونے سے روکتا ہے۔

فال بیک روٹ کی صحیح طریقے سے وضاحت کیسے کریں۔

React Router استعمال کرتے وقت، فال بیک روٹ ایک ایسا راستہ ہوتا ہے جو اس وقت استعمال ہوتا ہے جب کوئی دوسرا راستہ درخواست کردہ URL سے مماثل نہ ہو۔ یہ عام طور پر صارفین کو 404 صفحہ یا کسی دوسرے صفحہ پر بھیجنے کے لیے استعمال کیا جاتا ہے جب درخواست کردہ URL موجود نہ ہو۔

ری ایکٹ راؤٹر میں فال بیک روٹ کی صحیح وضاحت کرنے کے لیے، آپ کو پہلے ایک بنانا چاہیے۔ جزو بنائیں اور اسے اپنے راستوں کے گرد لپیٹ دیں۔ کے اندر جزو، آپ کو اپنے عام راستوں کو شامل کرنا چاہئے جس کے بعد a جس کا کوئی راستہ متعین نہیں ہے۔ یہ آپ کا فال بیک روٹ ہو گا اور ایسی کسی بھی درخواست کو پکڑے گا جو آپ کے دوسرے راستوں سے مماثل نہیں ہیں۔ اس کے بعد آپ وضاحت کر سکتے ہیں کہ جب یہ راستہ مماثل ہو تو کیا ہونا چاہیے، جیسے کہ 404 صفحہ پر ری ڈائریکٹ کرنا یا کچھ اور مواد ڈسپلے کرنا۔

فال بیک روٹ ہمیشہ کیوں متحرک ہوتا ہے۔

ری ایکٹ راؤٹر میں فال بیک روٹ ہمیشہ اس وقت متحرک ہوتا ہے جب URL کا راستہ موجودہ روٹس میں سے کسی سے مماثل نہیں ہوتا ہے۔ ایسا اس وقت ہو سکتا ہے جب کوئی صارف دستی طور پر غلط یو آر ایل میں ٹائپ کرتا ہے، یا اگر ایپلیکیشن کی روٹنگ منطق ٹھیک طرح سے کنفیگر نہیں ہوتی ہے۔ فال بیک روٹ ڈویلپرز کو ان منظرناموں کو احسن طریقے سے سنبھالنے اور صارف کو فیڈ بیک فراہم کرنے کی اجازت دیتا ہے، جیسے کہ 404 صفحہ یا انہیں ہوم پیج پر بھیجنا۔

متعلقہ اشاعت:

ایک کامنٹ دیججئے