شرح صفوف ومحتوى الفقرة
عند التنقل بين شاشات التطبيق الواحد، يؤدي كتابة وسم رابط تقليدي مثل <a href="/courses"> إلى تفعيل سلوك المتصفح الافتراضي الذي يهدم الصفحة الحالية ويمسح ذاكرة JavaScript، فتعود كل قيم useState والسياقات المشتركة إلى نقطة الصفر.
باستخدام مكون <Link to="/courses"> من حزمة react-router-dom للروابط الداخلية، تعترض المكتبة النقرة الاعتيادية عبر event.preventDefault() وتبدل الشاشة لحظياً مع احتفاظ التطبيق بكامل حالته.
HTML
<BrowserRouter>
<nav className="rx-nav">
<Link to="/">Catalog ({count})</Link>
<Link to="/cart">Cart</Link>
</nav>
<Routes>
<Route path="/" element={<Catalog add={onAdd} />} />
<Route path="/cart" element={<Cart n={count} />} />
</Routes>
</BrowserRouter>