العودة للمقالات

ما وراء React Router: استراتيجيات توجيه متقدمة من جهة العميل

Majd Muhtaseb28‏/04‏/20257 دقيقة

مقدمة

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

تقسيم الكود باستخدام React.lazy و Suspense

تتمثل إحدى نقاط الاختناق الشائعة في الأداء في تحميل حزمة التطبيق بأكملها مقدمًا. يسمح لك تقسيم التعليمات البرمجية بتحميل أجزاء من تطبيقك حسب الطلب. React's React.lazy و Suspense هما أداتان ممتازة لتحقيق ذلك.

import React, { lazy, Suspense } from 'react';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      {/* Your Router Setup Here */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

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

جلب البيانات عند تغيير المسار

يعد جلب البيانات قبل عرض المكون أمرًا بالغ الأهمية للعديد من التطبيقات. على الرغم من أنه يمكنك إجراء جلب البيانات داخل المكون نفسه، إلا أن القيام بذلك قبل تركيب المكون يمكن أن يؤدي إلى تجربة مستخدم أكثر سلاسة. توفر مكتبات مثل react-router-dom خطافات مثل useLoaderData لتحقيق ذلك باستخدام نهج createBrowserRouter الأحدث.

import { createBrowserRouter, RouterProvider, useLoaderData } from "react-router-dom";

async function getUserData() {
  const response = await fetch("https://api.example.com/user");
  return response.json();
}

function UserProfile() {
  const user = useLoaderData();

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

const router = createBrowserRouter([
  {
    path: "/user",
    element: <UserProfile />,
    loader: getUserData,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

استعادة التمرير

يمكن أن تنشأ تجربة مستخدم محبطة عند التنقل بين المسارات ولا تتذكر الصفحة موضع التمرير الخاص بها. يوفر React Router مكون <ScrollRestoration> للتعامل مع هذا تلقائيًا.

import { ScrollRestoration } from "react-router-dom";

function App() {
  return (
    <>
      {/* Your Router Setup Here */}
      <ScrollRestoration />
      <Routes>
        {/* ... Routes ... */}
      </Routes>
    </>
  );
}

خاتمة

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