تم حلها: إعادة توجيه جهاز التوجيه 404

المشكلة الرئيسية المتعلقة بإعادة توجيه React Router 404 هي أنه قد يكون من الصعب تنفيذه. نظرًا لأن React Router لا يحتوي على صفحة 404 مضمنة ، يجب على المطورين إنشاء مسار يدويًا لصفحة 404 ثم تكوين جهاز التوجيه لإعادة توجيه أي طلبات لا تتطابق مع مسار موجود. يتطلب ذلك تعليمات برمجية وتكوينًا إضافيين ، الأمر الذي قد يستغرق وقتًا طويلاً ويصعب تصحيحه إذا حدث خطأ ما. بالإضافة إلى ذلك ، إذا انتقل المستخدم مباشرة إلى عنوان URL غير موجود ، فسيظل يرى صفحة خطأ بدلاً من إعادة توجيهه إلى صفحة 404.

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

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

      {/* 404 Redirect */}
      <Route render={() => (<Redirect to="/" />)} /> 

    </Switch>
  </Router>  
);

// السطر 1: يستورد هذا الخط مكونات BrowserRouter و Route و Switch من مكتبة React-router-dom.

// السطر 3: يعرّف هذا السطر وظيفة تسمى التطبيق الذي يقوم بإرجاع JSX.

// الأسطر 5-7: هذه الأسطر تلتف مكون التطبيق في مكون جهاز التوجيه من رد فعل جهاز التوجيه دوم.

// الأسطر 8-10: تحدد هذه الخطوط مسارين للمكونين Home و About على التوالي.

// السطر 12: يحدد هذا السطر المسار الذي يعيد التوجيه إلى الصفحة الرئيسية إذا لم يكن هناك مسار آخر يتطابق.

ما هو رمز الخطأ 404

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

404 إعادة توجيه

في React Router ، تعد إعادة التوجيه 404 طريقة لإعادة توجيه المستخدمين إلى صفحة مختلفة عندما يحاولون الوصول إلى عنوان URL غير صالح. يمكن أن يكون هذا مفيدًا لتزويد المستخدمين بتجربة أفضل عند إدخال عنوان URL غير صحيح أو محاولة الوصول إلى صفحة غير موجودة. يمكن تنفيذ إعادة التوجيه 404 باستخدام مكون إعادة التوجيه من React Router ، والذي يسمح لك بتحديد اسم مسار الصفحة التي تريد إعادة توجيه المستخدم إليها. على سبيل المثال ، إذا حاول شخص ما الوصول إلى / عنوان url غير صالح ، فيمكنك استخدام مكون إعادة التوجيه مثل هذا: