البرنامج التعليمي Reach Router

بداية سريعة لاستخدام Reach Router في تطبيق React الخاص بك

في المشروع الأخير الذي قمت به استخدمتهالوصول إلى جهاز التوجيهوأعتقد أنها أبسط طريقة للتوجيه في تطبيق React.

أعتقد أنه أسهل بكثير منرد فعل راوتر، وهو جهاز توجيه آخر استخدمته في الماضي.

إليك برنامج تعليمي مدته 5 دقائق للتعرف على أساسياته.

تثبيت

أولاً ، قم بتثبيته باستخدام

npm install @reach/router

إذا كان@بناء الجملة جديد بالنسبة لك ، إنها ميزة npm للسماح بحزمة محددة النطاق. بعبارة أخرى ، مساحة اسم.

بعد ذلك ، قم باستيراده في مشروعك.

import { Router } from '@reach/router'

الاستخدام الأساسي

أستخدمه في ملف React ذي المستوى الأعلى ،index.jsفيإنشاء رد فعل التطبيقالتثبيت ، التفاف جميع المكونات التي أريد أن تظهر:

ReactDOM.render(
  <Router>
    <Form path="/" />
    <PrivateArea path="/private-area" />
  </Router>,
  document.getElementById('root')
)

الpathالسمة التي أضفتها إلى المكونات تسمح لي بتعيين المسار لها.

بمعنى آخر ، عندما أكتب هذا المسار في شريط عنوان URL للمتصفح ، يعرض Reach Router هذا المكون المحدد لي.

ال/path هو مسار الفهرس ، ويظهر عندما لا تقوم بتعيين عنوان URL / مسار بجانب نطاق التطبيق. "الصفحة الرئيسية" بعبارة أخرى.

المسار الافتراضي

عندما يزور المستخدم عنوان URL لا يتطابق مع أي مسار ، يقوم Reach Router افتراضيًا بإعادة التوجيه إلى ملف/طريق. يمكنك إضافة ملفdefaultمسار للتعامل مع هذه الحالة وعرض رسالة "404" لطيفة بدلاً من ذلك:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
  <NotFound default />
</Router>

تغيير المسار برمجيًا

استخدم الnavigateوظيفة لتغيير المسار برمجيًا في تطبيقك:

import { navigate } from '@reach/router'
navigate('/private-area')

استخدم الLinkمكون لربط مساراتك باستخدام JSX:

import { Link } from '@reach/router'
<Link to="/">Home</Link>
<Link to="/private-area">Private Area</Link>

معلمات URL

أضف معلمات باستخدام ملف:paramبناء الجملة:

<Router>
  <User path="users/:userId" />
</Router>

الآن في مكون المستخدم الافتراضي هذا ، يمكننا الحصول على الامتدادuserIdكدعم:

const User = ({ userId }) => (
  <p>User {userId}</p>
)

طرق متداخلة

لقد أوضحت لك كيف يمكن تحديد المسارات بهذه الطريقة في ملف React ذي المستوى الأعلى:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
</Router>

يمكنك تحديد المسارات المتداخلة:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area">
    <User path=":userId" />
  </PrivateArea>
</Router>

حتى الآن يمكنك الحصول على الخاص بك/private-area/23232نقطة الارتباط إلى مكون المستخدم ، ويمررuserId 23232.

يمكنك أيضًا اختيار السماح للمكون بتحديد مساراته الخاصة بداخله. أنت تستخدم/*البدل بعد الطريق:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area/*" />
</Router>

ثم داخل المكون ، يمكنك استيراد جهاز التوجيه مرة أخرى ، وتحديد مجموعة المسارات الفرعية الخاصة به:

//component PrivateArea
<Router>
  <User path="/:userId" />
</router>

أي طريق باستخدام/private-area/somethingسيتم التعامل مع مكون المستخدم ، وسيتم إرسال الجزء الذي يلي المسار باعتبارهuserIdدعم.

لعرض شيء في/private-areaالطريق الآن تحتاج أيضًا إلى إضافة ملف/معالج فيPrivateAreaعنصر:

//component PrivateArea
<Router>
  <User path="/:userId" />
  <PrivateAreaDashboard path="/" />
</router>

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: