تكرار السؤال: …
الإجابة المختصرة
BrowserRouter يستخدم HTML5 History API لتطبيقات الويب الحديثة، و HashRouter يستخدم # في الرابط للخوادم البسيطة، بينما MemoryRouter يحتفظ بالمسارات في الذاكرة ومثالي لبيئات الاختبار (Jest/Vitest).
الشرح
BrowserRouter هو الخيار القياسي لإنتاج روابط نظيفة تتطلب تهيئة السيرفر لرد index.html لجميع المسارات. HashRouter يستخدم التجزئة (#) ولا يحتاج لأي تكوين في السيرفر لكنه ضار بـ SEO. MemoryRouter لا يتعامل مع متصفح أو شريط عناوين إطلاقاً ويستخدم خصيصاً في وحدات الاختبار وبيئات التفاعل غير المتصفحية مثل React Native.
مثال بالكود
// مثال لاختبار مكون تنقل باستخدام MemoryRouter
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
test('يعرض صفحة الملف الشخصي', () => {
render(
<MemoryRouter initialEntries={['/profile/42']}>
<AppRoutes />
</MemoryRouter>
);
expect(screen.getByText(/الملف الشخصي/i)).toBeInTheDocument();
});أخطاء شائعة
- استخدام BrowserRouter داخل بيئة Node.js الخاصة باختبارات Unit Tests دون توفر نافذة window/history كاملة.