2.8 KiB
| title | localeTitle |
|---|---|
| React Router | React Router |
React راوتر للمبتدئين
التركيب
تم تقسيم "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> .
بيان الاستيراد
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
IndexRoute والروابط
الآن ، دعنا نضيف التنقل للوصول بنا بين الصفحات.
للقيام بذلك ، <Link> مكون <Link> . يشبه <Link> استخدام علامة ارتساء html.
من المستندات:
الطريقة الأساسية للسماح للمستخدمين بالتنقل حول تطبيقك. سيجعل علامة ارتساء يمكن الوصول إليها بالكامل مع href الصحيح. للقيام بذلك ، دعنا أولاً إنشاء مكون Nav. سيحتوي مكون Nav الخاص بنا على مكونات <Link> ، وسيبدو كما يلي:
`const Nav = () => (