تعلم React Router في 5 دقائق - برنامج تعليمي للمبتدئين

في بعض الأحيان يكون لديك 5 دقائق فقط لتجنيبها. بدلاً من إهدارها على وسائل التواصل الاجتماعي ، دعنا نحصل على مقدمة مدتها 5 دقائق عن React-Router! في هذا البرنامج التعليمي ، سنتعلم أساسيات التوجيه في React من خلال إنشاء نظام ملاحة لموقع ويب لمتجر حياكة Scrimba. هذا ليس حقيقيًا ، لكن ربما يومًا ما ... ؛)

إذا كنت تريد مقدمة مناسبة لهذا الموضوع ، يمكنك الانضمام إلى قائمة الانتظار لدورة React المتقدمة القادمة الخاصة بي ، أو إذا كنت لا تزال مبتدئًا ، فراجع الدورة التدريبية التمهيدية الخاصة بي على React.

ما هو React-Router ، على أي حال؟

تتكون العديد من مواقع الويب الحديثة في الواقع من صفحة واحدة ، فهي تبدو كصفحات متعددة لأنها تحتوي على مكونات تظهر كصفحات منفصلة. وعادة ما يشار إليها باسم هذه المنتجعات - الصورة ingle- ع سن و pplications. في جوهره ، ما يفعله React Router هو عرض مكونات معينة بشكل مشروط بناءً على المسار المستخدم في عنوان URL (للصفحة /الرئيسية ، /aboutللصفحة حول ، وما إلى ذلك).

على سبيل المثال ، يمكننا استخدام React Router لربط www.knit-with-scrimba.com/ بـ www.knit-with-scrimba.com/about أو www.knit-with-scrimba.com/shop

يبدو رائعًا - كيف يمكنني استخدامه؟

لاستخدام جهاز React Router ، عليك أولاً تثبيته باستخدام NPM:

npm install react-router-dom 

بدلاً من ذلك ، يمكنك فقط استخدام هذا الملعب في Scrimba ، الذي يحتوي على الرمز الكامل مكتوبًا بالفعل.

ستحتاج إلى استيراد BrowserRouter و Route و Switch من react-router-domالحزمة:

import React, { Component } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

في المثال الخاص بي ، أقوم بربط الصفحة المقصودة بـ "صفحتين" أخريين (وهما في الواقع مجرد مكونات) تسمى Shopو About.

أولاً ، ستحتاج إلى إعداد تطبيقك للعمل مع React Router. يجب أن يدخل كل شيء يتم عرضه داخل العنصر ، لذا قم بلف تطبيقك بها أولاً. إنه المكون الذي يقوم بكل منطق عرض المكونات المختلفة التي توفرها له.

// index.js ReactDOM.render(   , document.getElementById('root') ) 

بعد ذلك ، في مكون التطبيق الخاص بك ، أضف Switchالعنصر (علامات الفتح والإغلاق). هذه تضمن تقديم مكون واحد فقط في كل مرة. إذا لم نستخدم هذا ، فيمكننا افتراضيًا Errorالمكون ، والذي سنكتبه لاحقًا.

function App() { return (     ) } 

حان الوقت الآن لإضافة العلامات الخاصة بك . هذه هي الروابط بين المكونات ويجب وضعها داخل العلامات.

لإخبار العلامات بالمكون المراد تحميله ، ما عليك سوى إضافة pathسمة واسم المكون الذي تريد تحميله componentبالسمة.

العديد من عناوين URL للصفحة الرئيسية هي اسم الموقع متبوعًا "/"، على سبيل المثال ، www.knit-with-scrimba.com/ . في هذه الحالة ، نضيف exactإلى علامة المسار. هذا لأن عناوين URL الأخرى تحتوي أيضًا على "/" ، لذلك إذا لم نخبر التطبيق أنه يحتاج إلى البحث عنه فقط /، فإنه يقوم بتحميل أول واحد يطابق المسار ، ونحصل على خطأ صعب جدًا للتعامل معه.

function App() { return (        ) } 

الآن قم باستيراد المكونات إلى التطبيق. قد ترغب في وضعها في مجلد "مكونات" منفصل للحفاظ على الكود نظيفًا ومقروءًا.

import Home from './components/Home'; import About from './components/About'; import Shop from './components/Shop'; 

في رسالة الخطأ هذه التي ذكرتها سابقًا ، والتي يتم تحميلها إذا كتب المستخدم عنوان URL غير صحيح. هذا مثل علامة عادية ، ولكن بدون مسار. يحتوي مكون الخطأ

Oops! Page not found!

. لا تنس استيراده إلى التطبيق.

function App() { return (         ) } 

حتى الآن ، لا يمكن تصفح موقعنا إلا عن طريق كتابة عناوين URL. لإضافة روابط قابلة للنقر إلى الموقع ، نستخدم Linkالعنصر من React Router ونقوم بإعداد Navbarمكون جديد . مرة أخرى ، لا تنس استيراد المكون الجديد إلى التطبيق.

أضف الآن Linkلكل مكون في التطبيق to="URL"واستخدمه لربطهم.

function Navbar() { return ( Home  About Us  Shop Now ); }; 

يحتوي موقعك الآن على روابط قابلة للنقر يمكنها التنقل لك حول تطبيق الصفحة الواحدة!

استنتاج

لذلك لدينا ذلك. إذا كنت ترغب في التنقل بسهولة حول تطبيق React ، فعليك أن تنسى علامات الربط وأضف React Router. إنه نظيف ومنظم ويجعل إضافة الصفحات وحذفها أسهل كثيرًا.

لمعرفة المزيد حول React Hooks والميزات الرائعة الأخرى لـ React ، يمكنك الانضمام إلى قائمة الانتظار لدورة React المتقدمة القادمة.

أو إذا كنت تبحث عن شيء أكثر ودية للمبتدئين ، يمكنك الاطلاع على الدورة التدريبية التمهيدية الخاصة بي على React.

ترميز سعيد ؛)