كيفية استخدام React Router V6: دليل المبتدئين

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

يقدم React Router V6 بعض التغييرات المهمة على خوارزمية التوجيه، لمعالجة المخاطر التي كانت موجودة في نسخته السابقة، وتوفير حل توجيه محسّن.

البدء في التوجيه باستخدام React Router V6

للبدء، إنشاء تطبيق React. بدلاً عن ذلك، قم بإعداد مشروع React باستخدام Vite. بعد إنشاء المشروع، قم بالمضي قدمًا وتثبيت البرنامج رد فعل جهاز التوجيه دوم طَرد.

npm install react-router-dom

إنشاء المسارات باستخدام React Router

لإنشاء مسارات، ابدأ بتغليف التطبيق بأكمله بـ BrowserRouter عنصر. قم بتحديث الكود الموجود في ملفك مؤشر.jsx أو main.jsx الملف على النحو التالي:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { BrowserRouter as Router } from'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(



 </Router>
 </React.StrictMode>,
)

يضمن التفاف مكون التطبيق مع مكون BrowserRouter حصول التطبيق بأكمله على إمكانية الوصول إلى سياق التوجيه والميزات التي تقدمها مكتبة React Router.

استخدام مكون الطرق

بمجرد الانتهاء من تغليف التطبيق بمكون BrowserRouter، يمكنك تحديد مساراتك.

ال الطرق المكون هو تحسين يُحوّل المكون الذي تم استخدامه سابقًا بواسطة React Router v5. يدعم هذا المكون التوجيه النسبي، وتصنيف المسار التلقائي، والقدرة على العمل مع المسارات المتداخلة.

عادةً، ستضيف مسارات على أعلى مستوى لتطبيقك، وغالبًا ما تكون ضمن مكون التطبيق. ومع ذلك، يمكنك تحديدها في أي مكان آخر، اعتمادًا على بنية مشروعك.

افتح ال App.jsx قم بملف واستبدل رمز React المعياري بما يلي:

import'./App.css'
import { Routes, Route } from'react-router-dom';
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
functionApp() {
return (
 <>

"/" element={} />
"/about" element={} />
 </Routes>
 </>
 )
}
exportdefault App

يقوم تكوين التوجيه هذا بتعيين مسارات URL محددة لمكونات الصفحة المقابلة (Dashboard وحول)، مما يضمن أن التطبيق يعرض المكون المناسب عندما يزور المستخدم موقعًا معينًا عنوان URL.

لاحظ ال عنصر Prop، ضمن مكون المسار، والذي يتيح لك تمرير مكون وظيفي بدلاً من اسم المكون فقط. وهذا يجعل من الممكن تمرير الدعائم عبر المسارات والمكونات المرتبطة بها.

في ال src الدليل، إنشاء جديد الصفحات الدليل، وإضافة ملفين جديدين: Dashboard.jsx و حول.jsx. تابع وحدد المكونات الوظيفية داخل هذه الملفات لاختبار المسارات.

استخدام createBrowserRouter لتحديد الطرق

الرد على وثائق جهاز التوجيه توصي باستخدام createBrowserRouter مكون لتحديد تكوين التوجيه لتطبيقات الويب React. هذا المكون هو بديل خفيف الوزن ل BrowserRouter والتي تأخذ مجموعة من الطرق كوسيطة لها.

باستخدام هذا المكون، ليست هناك حاجة لتحديد مساراتك داخل مكون التطبيق. بدلاً من ذلك، يمكنك تحديد جميع تكوينات المسار الخاصة بك داخل مؤشر.jsx أو main.jsx ملف.

فيما يلي مثال لكيفية استخدام هذا المكون:

import React from'react'
import ReactDOM from'react-dom/client'
import { createBrowserRouter, RouterProvider } from"react-router-dom";
import App from'./App.jsx'
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
const router = createBrowserRouter([
 {
 path: "/",
 element: <App />,
 },
 {
 path: "/dashboard",
 element: <Dashboard />,
 },
 {
 path: "/about",
 element: <About />,
 },
]);
ReactDOM.createRoot(document.getElementById("root")).render(


 </React.StrictMode>
);

يستخدم تكوين التوجيه createBrowserRouter و RouterProvider المكونات لإنشاء نظام توجيه لتطبيق React.

ومع ذلك، فإن الاختلاف الوحيد في هذا التنفيذ هو أنه بدلاً من تغليف التطبيق باستخدام مكون BrowserRouter، فإنه يستخدم RouterProvider مكون لتمرير جهاز التوجيه السياق لجميع المكونات في التطبيق.

تنفيذ مسارات الصفحة غير الموجودة

ال طريق يقارن الدعامة في مكون المسار المسار المقدم بعنوان URL الحالي لتحديد ما إذا كان هناك تطابق قبل عرض المكون المطلوب.

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

لتنفيذ مسار 404، قم بإضافة هذا المسار داخل مكون المسارات:

// using the Route component
"*" element={} /> 
// using createBrowserRouter
{ path: "*", element: <NotFound />, },

ثم قم بإنشاء مخصص NotFound.jsx المكون وأخيرا قم بتصميم المكون باستخدام وحدات CSS.

العلامة النجمية (*) هي حرف بدل يعالج السيناريوهات التي لا يتطابق فيها أي من المسارات المحددة مع عنوان URL الحالي.

التنقل البرمجي باستخدام خطاف useNavigate

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

دعونا نلقي نظرة على كيفية استخدام useNavigate ربط للملاحة البرنامجية. على افتراض أنك قمت بإنشاء حول.jsx المكون الوظيفي، قم باستيراد الخطاف من حزمة React Router:

import { useNavigate } from'react-router-dom';

ثم أضف زرًا يؤدي عند النقر عليه إلى تشغيل التنقل إلى مسار محدد.

functionAbout() {
const navigate = useNavigate();
const handleButtonClick = () => {
 navigate("/");
 };
return (
 <>
// Rest of the code ...

 </>
 );
}
exportdefault About;

من الجدير بالذكر أن خطاف useNavigate وخطاف useNavigation، المقدمين في React Router v6، يخدمان أغراضًا مميزة على الرغم من أسمائهما وثيقة الصلة.

يمكّنك خطاف useNavigation من الوصول إلى التفاصيل المتعلقة بالتنقل، مثل حالة التنقل المستمرة والتفاصيل الأخرى. يعد هذا مفيدًا عندما تريد عرض عناصر واجهة المستخدم مثل تحميل الأجزاء الدوارة لتوفير تعليقات مرئية حول العمليات الجارية.

فيما يلي مثال لكيفية استخدام خطاف useNavigation.

import { useNavigation } from"react-router-dom";
functionSubmitButton() {
const navigation = useNavigation();
const buttonText =
 navigation.state "submitting"
? "Saving..."
: navigation.state "loading"
? "Saved!"
: "Go";
return<buttontype="submit">{buttonText}button>;
}

في هذا المثال، زر الإرسال سيقوم المكون بتحديث نصه ديناميكيًا بناءً على حالة التنقل التي تم الحصول عليها من خطاف useNavigation.

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

باستخدام خطاف useRoutes

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

فيما يلي مثال بسيط لكيفية استخدام الخطاف:

import { useRoutes } from'react-router-dom';
import Dashboard from'./Dashboard';
import About from'./About';
const routes = [
 {
 path: '/',
 element: <Dashboard/>,
 },
 {
 path: '/about',
 element: <About />,
 },
];
functionApp() {
const routeResult = useRoutes(routes);
return routeResult;
}
exportdefault App;

في هذا المثال، الطرق يحدد الكائن تعيين مسارات URL للمكونات. ال برنامج يستخدم المكون بعد ذلك هذا الخطاف لمطابقة عنوان URL الحالي وتقديم المكون المناسب بناءً على المسار المطابق.

يمنحك استخدام هذا الخطاف تحكمًا دقيقًا في منطق التوجيه الخاص بك ويسمح لك بإنشاء منطق مخصص لمعالجة التوجيه لتطبيقك بسهولة.

التعامل مع التوجيه في تطبيقات React

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