كيفية إنشاء صفحة 404 في React باستخدام React Router

عاجلاً أم آجلاً ، سيزور المستخدم عنوان URL غير موجود على موقع الويب الخاص بك. ما يفعله المستخدم بعد هذا الأمر متروك لك.

قد يضغطون على زر الرجوع ويغادرون موقعك. بدلاً من ذلك ، يمكنك توفير صفحة 404 مفيدة لمساعدتهم على الاستمرار في الانتقال إلى موقع الويب الخاص بك.

بالنسبة إلى مواقع ويب React ، يمكنك استخدام جهاز توجيه React لإنشاء صفحة 404 مفيدة غير موجودة.

إنشاء صفحة 404

ال 404 خطأ يحدث عندما تحاول زيارة صفحة على موقع ويب لا يستطيع الخادم العثور عليها. بصفتك مطورًا ، فإن التعامل مع أخطاء 404 يعني إنشاء صفحة يستخدمها الخادم كبديل عندما لا يتمكن من العثور على الصفحة المطلوبة.

في React ، يمكنك القيام بذلك عن طريق إنشاء مكون غير موجود يتم عرضه على المسارات غير الموجودة.

تفترض هذه المقالة أن لديك بالفعل تطبيق React يعمل مع إعداد التوجيه. إذا لم تكن كذلك ، إنشاء تطبيق React ثم قم بالتثبيت رد فعل راوتر.

قم بإنشاء ملف جديد يسمى NotFound.js وأضف التعليمات البرمجية التالية لإنشاء صفحة 404.

يستورد { وصلة } من "رد فعل جهاز التوجيه دوم" ؛
يصدّرتقصيروظيفةغير معثور عليه() {
يعود (
<شعبة>
<h1>أُووبس! يبدو أنك ضائع.</h1>
<ص>هذه بعض الروابط المفيدة:</ ص>
<ارتباط بـ ='/'>بيت</Link>
<ارتباط بـ ='/blog'>مدونة</Link>
<ارتباط بـ ='/contact'>اتصال</Link>
</div>
 )
}

تعرض صفحة 404 هذه رسالة وروابط لإعادة توجيه المستخدم إلى الصفحات الشائعة على موقع الويب.

التوجيه إلى صفحة 404

يمكنك إنشاء مسار عادي باستخدام جهاز توجيه React مثل هذا:

يستورد {مسار ، مسارات} من "رد فعل جهاز التوجيه دوم" ؛
وظيفةبرنامج() {
يعود (
<طرق>
<مسار المسار ="/" العنصر = { <بيت/> }/>
</Routes>
 )
}

أنت تحدد مسار URL والعنصر الذي تريد عرضه في هذا المسار.

يتم عرض صفحة 404 للمسارات غير الموجودة على موقع الويب. لذلك ، بدلاً من تحديد المسار ، استخدم علامة النجمة (*).

<مسار المسار ='*' العنصر = {<غير معثور عليه />}/>

استخدام * يعرض مكون NotFound لجميع عناوين URL غير المحددة في المسارات.

التوجيه في React

يمكنك بسهولة إنشاء صفحة 404 لجميع عناوين URL غير الموجودة في تطبيق الويب React الخاص بك باستخدام جهاز توجيه.

تحتوي المتصفحات على صفحة 404 افتراضية ولكن إنشاء صفحة مخصصة يتيح لك إخبار المستخدمين بالخطأ الذي حدث وكيف يمكنهم إصلاحه. يمكنك أيضًا إنشاء صفحة 404 تناسب علامتك التجارية.