تم تقسيم "React Router" إلى ثلاث حزم: `react-router` ، `react-router-dom` ، `react-router` ، `react-router-dom` ، `react-router-native` .
يجب ألا تضطر مطلقًا إلى تثبيت موجه الاستجابة مباشرة. توفر هذه الحزمة مكونات التوجيه الأساسية ووظائف تطبيقات React Router. أما النوعان الآخران فيوفران مكونات خاصة بالبيئة (المستعرض والتفاعلية الأصلية) ، ولكنهما يعيدان أيضًا تصدير جميع صادرات أجهزة التوجيه التفاعلية.
نحن نبني موقعًا على الويب (وهو أمر سيتم تشغيله في المتصفحات) ، لذا سنقوم بتثبيت رد جهاز التوجيه.
`npm install --save react-router-dom`
# جهاز التوجيه
عند بدء مشروع جديد ، تحتاج إلى تحديد نوع جهاز التوجيه الذي يجب استخدامه. للمشاريع القائمة على المتصفح ، هناك و المكونات. يجب استخدام `<BrowserRouter>` عندما يكون لديك خادم يتعامل مع الطلبات الديناميكية (يعرف كيفية الرد على أي URI محتمل) ، بينما يجب استخدامه لمواقع الويب الثابتة (حيث يمكن للملقم الاستجابة فقط لطلبات الملفات التي يعرفها).
عادة ما يكون من الأفضل استخدام `<BrowserRouter>` ، ولكن إذا كان موقعك مستضافًا على خادم يخدم ملفات ثابتة فقط ، فإن `<HashRouter>` هو حل جيد.
بالنسبة `<BrowserRouter>` ، سنفترض أن الموقع سيتم دعمه من خلال خادم ديناميكي ، لذا فإن مكون الموجه المفضل لدينا هو `<BrowserRouter>` .
للقيام بذلك ، `<Link>` مكون `<Link>` . يشبه `<Link>` استخدام علامة ارتساء html.
من المستندات:
الطريقة الأساسية للسماح للمستخدمين بالتنقل حول تطبيقك. سيجعل علامة ارتساء يمكن الوصول إليها بالكامل مع href الصحيح. للقيام بذلك ، دعنا أولاً إنشاء مكون Nav. سيحتوي مكون Nav الخاص بنا على مكونات `<Link>` ، وسيبدو كما يلي: