في تطبيق React ، routing يلعب تنسيق URL دورًا مهمًا في التنقل بين الصفحات وعرض المحتوى المقابل. للإدارة routing في React ، يمكننا استخدام المكتبة. فيما يلي دليل أساسي حول كيفية استخدام تنسيق عناوين URL والتعامل معها في تطبيق React الخاص بك. React Router React Router routing
ثَبَّتَ React Router
افتح دليل المشروع الخاص بك في المحطة وقم بتشغيل الأمر التالي للتثبيت: React Router npm install react-router-dom
قم باستيراد المكونات الضرورية من مكون React الخاص بك. React Router
تحديد الطرق
استخدم المكون لالتفاف تطبيق React الخاص بك وتعيين تنسيق عنوان URL أساسي. <BrowserRouter>
استخدم <Route>
المكون لتحديد المسارات في تطبيقك.
مثال:
عرّف Link s
استخدم المكون لإنشاء تنقلات في تطبيقك. <Link>
link
مثال:
الوصول إلى معلمات المسار
استخدم <Route>
المكون بسمة path
في التنسيق /users/:id
للوصول إلى معلمات المسار.
ضمن المكون المحدد بواسطة <Route>
، يمكنك استخدامه useParams()
للوصول إلى قيم معلمات المسار.
مثال:
استخدم Switch و Redirect
استخدم المكون لعرض المسار الأول الذي يطابق المسار فقط. <Switch>
استخدم المكون للمستخدمين من مسار محدد إلى آخر. <Redirect>
redirect
مثال:
هذه بعض المفاهيم الأساسية لتنسيق URL واستخدام routing React. من خلال الاستخدام ، يمكنك إنشاء تطبيقات React مرنة مع القدرة على التنقل وعرض المحتوى المتنوع بناءً على عنوان URL. React Router React Router