ستجد حلا: كيفية إعادة التوجيه في React Router v6

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

In React Router v6, you can use the <Redirect> component to redirect from one page to another.

Example: 

import { Redirect } from 'react-router-dom'; 
 
<Route exact path="/old-path"> 
   <Redirect to="/new-path" /> 
</Route>

1. استيراد {Redirect} من "React-router-dom" ؛
- يستورد هذا الخط مكون إعادة التوجيه من مكتبة رد فعل جهاز التوجيه دوم.

2.
- ينشئ هذا الخط مكون مسار بمسار دقيق لـ "/ old-path".

3.
- يستخدم هذا السطر مكون إعادة التوجيه لإعادة التوجيه من "/ old-path" إلى "/ new-path".

كيف يمكنني إعادة التوجيه في React Router v6

v6

يوفر React Router v6 مكون إعادة توجيه يمكن استخدامه لإعادة توجيه المستخدمين من صفحة إلى أخرى. لاستخدام مكون إعادة التوجيه ، تحتاج إلى استيراده من حزمة رد فعل جهاز التوجيه دوم. يأخذ مكوِّن إعادة التوجيه خاصيتين: من وإلى. الخاصية "from" هي مسار الصفحة الحالية ، وخاصية "to" هي مسار الصفحة التي تريد إعادة توجيه المستخدمين إليها. على سبيل المثال ، إذا أردت إعادة توجيه المستخدمين من / homepage إلى / about ، فستبدو شفرتك كما يلي:

استيراد {إعادة توجيه} من "رد-راوتر-دوم" ؛

ما هو جهاز التوجيه؟

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

أنواع جهاز التوجيه في التفاعل

React Router هي مكتبة توجيه لـ React تتيح للمطورين إنشاء تطبيقات ذات صفحة واحدة باستخدام التنقل وتوجيه URL. يوفر ثلاثة أنواع من أجهزة التوجيه: BrowserRouter و HashRouter و MemoryRouter.

BrowserRouter: يستخدم جهاز التوجيه هذا واجهة برمجة تطبيقات سجل HTML5 للحفاظ على مزامنة واجهة المستخدم الخاصة بك مع عنوان URL. يتم استخدامه عندما تريد استخدام عناوين URL حقيقية في تطبيقك.

HashRouter: يستخدم جهاز التوجيه هذا جزء التجزئة من عنوان URL (على سبيل المثال ، #) للحفاظ على مزامنة واجهة المستخدم الخاصة بك مع عنوان URL. يتم استخدامه عندما لا ترغب في استخدام عناوين URL حقيقية أو عندما تحتاج إلى التوافق مع المتصفحات القديمة التي لا تدعم واجهة برمجة تطبيقات سجل HTML5.

MemoryRouter: يحتفظ هذا الموجه بسجل للمواقع في الذاكرة ولا يتفاعل مع شريط عنوان المتصفح ولا ينشئ عناوين URL حقيقية. إنه مفيد لأغراض الاختبار أو للبيئات التي يكون فيها استخدام عناوين URL الحقيقية غير مرغوب فيه (على سبيل المثال ، العرض من جانب الخادم).