d6a160445e
* fix: converted single to triple backticks13 * fix: added prefix Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: removed language in wrong place Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: add language postfix Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: removed language in wrong place Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>
48 lines
2.9 KiB
Markdown
48 lines
2.9 KiB
Markdown
---
|
|
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>` .
|
|
|
|
# بيان الاستيراد
|
|
|
|
```javascript
|
|
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
|
|
```
|
|
|
|
## IndexRoute والروابط
|
|
|
|
الآن ، دعنا نضيف التنقل للوصول بنا بين الصفحات.
|
|
|
|
للقيام بذلك ، `<Link>` مكون `<Link>` . يشبه `<Link>` استخدام علامة ارتساء html.
|
|
|
|
من المستندات:
|
|
|
|
الطريقة الأساسية للسماح للمستخدمين بالتنقل حول تطبيقك. سيجعل علامة ارتساء يمكن الوصول إليها بالكامل مع href الصحيح. للقيام بذلك ، دعنا أولاً إنشاء مكون Nav. سيحتوي مكون Nav الخاص بنا على مكونات `<Link>` ، وسيبدو كما يلي:
|
|
|
|
```javascript
|
|
const Nav = () => (
|
|
<div>
|
|
<Link to='/'>Home</Link>
|
|
<Link to='/address'>Address</Link>
|
|
</div>
|
|
)
|
|
``` |