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 = () => (