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

في هذا الدليل، سننفذ مسارات التنقل في React باستخدام جهاز التوجيه التفاعلي v6 وBootstrap.

React-router v6 عبارة عن مكتبة توجيه تُستخدم في React وReact Native للتنقل داخل صفحة ويب أو تطبيق ويب.

يستخدم تطبيقنا Typescript ولكن يمكن أيضًا استخدامه بسهولة لمشروع يعتمد على Javascript.

إنشاء

أولاً، لنثبت React-router-dom في مشروعنا إذا لم يكن قد تم تثبيته بالفعل:

تثبيت npm رد فعل جهاز التوجيه-دوم

أو البديل باستخدام الغزل:

يضيف الغزل رد فعل جهاز التوجيه

فلنقم أيضًا بتثبيت bootstrap لتصميم مكوناتنا:

تثبيت npm bootstrap

تنفيذ المكون لدينا

نقوم بعد ذلك بإنشاء مكون Breadcrumbs.tsx الذي سيحتوي على ترميز فتات الخبز ويتضمن أيضًا المنطق اللازم لتحديد الموقع الحالي بالنسبة إلى الموقع الجذر.

لنبدأ بإضافة علامة بسيطة للمكون:

يحتوي المكون حاليًا على زر الرجوع فقط. دعونا نضيف تطبيقًا بسيطًا لزر الرجوع بحيث يتم تحميل الصفحة السابقة عند النقر عليه:

  const goBack = () => {
    window.history.back();
  };

ستكون الخطوة التالية هي كتابة دالة تستخدم وظيفة matchRoutes للحصول على المسار الحالي وتطبيق التحويلات لتصفية جميع المسارات ذات الصلة بالمسار الحالي.
يقبل matchRoute مصفوفة من الكائنات من النوع AgnosticRouteObject ويقوم بإرجاع AgnosticRouteMatch[] | خالية حيث T هو نوع الكائن الذي نمرره.
من المهم أيضًا ملاحظة أن الكائن يجب أن يحتوي على خاصية تسمى المسار.

لنعلن أولاً عن واجهة لمسارنا:

export interface IRoute {
  name: string;
  path: string; //Important
}

دعونا نعلن بعد ذلك عن مساراتنا:

const routes: IRoute[] = [
  {
    path: '/home',
    name: 'Home'
  },
  {
    path: '/home/about',
    name: 'About'
  },
  {
    path: '/users',
    name: 'Users'
  },
  {
    path: '/users/:id',
    name: 'User'
  },
  {
    path: '/users/:id/settings/edit',
    name: 'Edit User Settings'
  }
];

نعلن أيضًا عن متغير للاحتفاظ بخطاف useLocation وأيضًا متغير للاحتفاظ بفتات التنقل الخاصة بنا في الحالة:

const location = useLocation();
const [crumbs, setCrumbs] = useState([]);

بعد ذلك، لننفذ وظيفتنا:

const getPaths = () => {
  const allRoutes = matchRoutes(routes, location);
  const matchedRoute = allRoutes ? allRoutes[0] : null;
  let breadcrumbs: IRoute[] = [];
  if (matchedRoute) {
    breadcrumbs = routes
      .filter((x) => matchedRoute.route.path.includes(x.path))
      .map(({ path, ...rest }) => ({
        path: Object.keys(matchedRoute.params).length
          ? Object.keys(matchedRoute.params).reduce(
              (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string), path)
          : path,
        ...rest,
      }));
  }
  setCrumbs(breadcrumbs);
};

هنا، نحصل أولاً على جميع الطرق التي تطابق الموقع الحالي:
const allRoutes = matchRoutes(routes, location);

نقوم بعد ذلك بإجراء فحص سريع لمعرفة ما إذا تم إرجاع أي نتيجة على الإطلاق ونأخذ النتيجة الأولى:
const matchedRoute = allRoutes ? allRoutes[0] : فارغة؛

بعد ذلك، نقوم بتصفية جميع المسارات التي تطابق المسار الحالي:
ways.filter((x) => matchedRoute.route.path.includes(x.path))

ثم دعونا نستخدم النتيجة لإنشاء مصفوفة جديدة تتحقق مما إذا كان المسار يحتوي على معلمات ثم يقوم بتبديل المسارات الديناميكية بقيمة المعلمات:

 .map(({ path, ...rest }) => ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));

يضمن هذا أنه إذا أعلنا عن مسار كـ /users/:id/edit في المسارات وتم تمرير المعرف كـ 1، فسنحصل على /users/1/edit.

بعد ذلك، دعنا نستدعي وظيفتنا في useEffect بحيث يتم تشغيلها في كل مرة يتغير فيها موقعنا:

  useEffect(() => {
    getPaths();
  }, [location]);

بعد الانتهاء من ذلك، يمكننا بعد ذلك استخدام الفتات في ترميزنا:

{crumbs.map((x: IRoute, key: number) =>
  crumbs.length === key   1 ? (
    

هنا اعرض جميع الفتات مع روابطها باستثناء الأخير الذي يعرض الاسم فقط.

وبهذا أصبح لدينا الآن مكون BreadCrumbs.tsx الكامل:

import { useEffect, useState } from 'react';
import { Link, matchRoutes, useLocation } from 'react-router-dom';

export interface IRoute {
  name: string;
  path: string;
}

const routes: IRoute[] = [
  {
    path: '/home',
    name: 'Home',
  },
  {
    path: '/home/about',
    name: 'About',
  },
  {
    path: '/users',
    name: 'Users',
  },
  {
    path: '/users/:id/edit',
    name: 'Edit Users by Id',
  },
];

const Breadcrumbs = () => {
  const location = useLocation();
  const [crumbs, setCrumbs] = useState([]);

  //   const routes = [{ path: '/members/:id' }];

  const getPaths = () => {
    const allRoutes = matchRoutes(routes, location);
    const matchedRoute = allRoutes ? allRoutes[0] : null;
    let breadcrumbs: IRoute[] = [];
    if (matchedRoute) {
      breadcrumbs = routes
        .filter((x) => matchedRoute.route.path.includes(x.path))
        .map(({ path, ...rest }) => ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));
    }
    setCrumbs(breadcrumbs);
  };

  useEffect(() => {
    getPaths();
  }, [location]);

  const goBack = () => {
    window.history.back();
  };

  return (
    

      
  );
};
export default Breadcrumbs;

يمكننا بعد ذلك استخدام المكون في أي جزء من تطبيقنا، ويفضل أن يكون ذلك في التخطيط.

خاتمة

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

روابط مفيدة

https://stackoverflow.com/questions/66265608/react-router-v6-get-path-pattern-for-current-route

https://medium.com/@mattywilliams/geneating-an-automatic-breadcrumb-in-react-router-fed01af1fc3 الذي يستلهم منه هذا المنشور.