---
title: React Router
localeTitle: 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 = () => (
  <div>
    <Link to='/'>Home</Link>&nbsp;
    <Link to='/address'>Address</Link>
  </div>
 )
`