شرح صفوف ومحتوى الفقرة
بما أن أي زائر يستطيع كتابة عنوان يدوي مثل /courses/unknown-item في المتصفح، فإن نجاح مطابقة النمط /courses/:slug لا يعني بالضرورة وجود هذا السجل في البيانات أو الخادم. تحقّق دائماً من وجود العنصر قبل قراءة خصائصه لتجنب انهيار المكون، واعرض بطاقة تنبيه ودية تضم رابط عودة آمناً عبر <Link>.
HTML
function OrderDetails() {
const { orderId } = useParams();
const order = ORDERS[orderId];
if (!order) {
return <p>Order #{orderId} was not found.</p>;
}
return <h3>Order Status: {order.status}</h3>;
}