Files

Randell Dawson d6a160445e Convert single backtick code sections to triple backtick code sections for Arabic Guide articles (13 of 15) (#36240 )

* 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>

2019-06-20 18:07:24 -05:00

2.9 KiB

Raw Blame History

title, localeTitle

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 = () => (
  <div>
    <Link to='/'>Home</Link>&nbsp;
    <Link to='/address'>Address</Link>
  </div>
)

2.9 KiB Raw Blame History