حل ہوا: ری ایکٹ روٹر لنک کام کرتا ہے۔

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

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

<Router>
  <div>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>

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

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

2.
// یہ لائن ایک راؤٹر جزو بناتی ہے جو ہماری درخواست کے لیے راستے بنانے کے لیے استعمال کیا جائے گا۔

3.

// یہ لائن ایک div عنصر بناتی ہے جس میں ہمارے تمام روٹس اور لنکس شامل ہوں گے۔

4. ہوم پیج (-)
// یہ سطر ہماری درخواست کے ہوم پیج پر متن 'ہوم' کے ساتھ ایک لنک بناتی ہے۔

5. کے بارے میں
// یہ لائن 'About' متن کے ساتھ ہماری درخواست کے بارے میں صفحہ کا لنک بناتی ہے۔

6.
// یہ لائن ہماری ایپلیکیشن کے ہوم پیج کے لیے ایک راستہ بناتی ہے اور جب کسی صارف کے ذریعہ اس تک رسائی حاصل کی جاتی ہے تو ہوم جز کو پیش کرتی ہے۔

7. //یہ لائن ہماری ایپلیکیشن کے بارے میں صفحہ کے لیے ایک راستہ بناتی ہے اور جب کسی صارف کے ذریعے اس تک رسائی حاصل کی جاتی ہے تو اس کے بارے میں جزو کو پیش کرتی ہے۔

8.

// یہ ہمارے div عنصر کو بند کر دیتا ہے جس میں ہمارے تمام روٹس اور لنکس ہوتے ہیں۔

لنک v6

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

ری ایکٹ راؤٹر لنک کیوں کام نہیں کر رہا ہے۔

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

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

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