لماذا React Router 7 هو تغيير كبير للمطورين باستخدام React

React Router هو أداة أساسية لإنشاء التصفح في تطبيقات React، وتواصل إصداراته الأخيرة تحسين تجربة المطورين بميزات جديدة وتحسينات الأداء. начиная с версии 7 (или других грядущих версий), React Router يقدم ميزات متقدمة مثل الم nest الرutas و رutas التخطيط التي تساعد في بناء تطبيقات الويب القوية والفعالة.

الميزات الرئيسية الجديدة في React Router 7 (أو أحدث)

إليك بعض التحسينات والميزات المهمة التي تم تقديمها في الإصدار الأخير:

1. تبسيط تعريف المسار باستخدام واجهات بيانات

واجهات بيانات جديدة، مثل loader و action، تتيح استرجاع وتعديل البيانات بطريقة أكثر إقراراً داخل المسارات.

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

مثال React Router v5

import { useEffect, useState } from 'react';

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

​

function UserPage() {

  const { id } = useParams();

  const [userData, setUserData] = useState(null);

​

  useEffect(() => {

    fetch(`/api/users/${id}`)

      .then((response) => response.json())

      .then((data) => setUserData(data));

  }, [id]);

​

  return (

    <div>

      <h1>User: {userData?.name}</h1>

    </div>

  );

}

​

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

مثال React Router v7

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

​

export async function userLoader({ params }) {

  const response = await fetch(`/api/users/${params.id}`);

  return response.json();

}

​

function UserPage() {

  const userData = useLoaderData();

  return (

    <div>

      <h1>User: {userData.name}</h1>

    </div>

  );

}

​

// Route Configuration

<Route path="/users/:id" element={<UserPage />} loader={userLoader} />

​

الفرق

في React Router 7، تم فصل منطق استدعاء البيانات (userLoader) عن المكون، مما يجعل المكونات تركز بشكل純 على الرسم. هذا النهج يسمح أيضًا باستدعاء البيانات مسبقًا قبل رسم المكون، مما يؤدي إلى تحسين تجربة المستخدم وانتقالات أ smoother.

2. نطاق الخطأ لكل مسار

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

في الإصدارات القديمة، كانت إدارة الأخطاء global أو تتم على مستوى المكون. هذا يتطلب من المطورين التعامل مع جميع الأخطاء المحتملة في مكان واحد أو إدخال منطق معقد في العديد من المكونات. كما هو موضح في المثال أدناه، ErrorBoundary هو global لأنه يلتف حول Router بأكمله، مما يعني أنه سي捕获 الأخطاء من جميع المسارات داخل التطبيق.

مثال React Router v5

function App() {

  return (

    <ErrorBoundary>

      <Router>

        <Route path="/" exact component={HomePage} />

        <Route path="/about" component={AboutPage} />

      </Router>

    </ErrorBoundary>

  );

}

​

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

مثال React Router v7

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

​

function ErrorBoundary() {

  const error = useRouteError();

  return <div>Error: {error.message}</div>;

}

​

<Route path="/users/:id" element={<UserPage />} errorElement={<ErrorBoundary />} />

​

الفرق

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

3. التعامل الأفضل مع مسارات التخطيط

مسارات التخطيط تم إدخالها للسماح بتفعيل تخطيط متسق عبر أجزاء مختلفة من التطبيق، مما يقلل من تكرار الكود.

في React Router v5، كان يجب تكرار التخطيطات مثل الرؤوس أو التذييلات أو اللوحات الجانبية يدويًا في كل مسار أو مكون. هذا يعني أن المطورين عادةً ماضعوا مكونات التخطيط (مثل Header، Footer) مباشرة داخل المكون App أو تكرارها عبر معالجات المسارات المختلفة، كما هو موضح في مثالك.

مثال React Router v5

import { BrowserRouter as Router, Route } from 'react-router-dom';

import Header from './Header';

import Footer from './Footer';

import HomePage from './HomePage';

import AboutPage from './AboutPage';

​

function App() {

  return (

    <Router>

      <Header />

      <Route path="/" exact component={HomePage} />

      <Route path="/about" component={AboutPage} />

      <Footer />

    </Router>

  );

}

​

ي introduce React Router 7 مسارات التخطيط، حيث يمكنك تعريف تخطيطات مشتركة تغلف المسارات الم嵌اه، مما ي��ق تكرار الكود وضمان هيكل أفضل.

مثال React Router v7

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

​

function SharedLayout() {

  return (

    <div>

      <header>Header Content</header>

      <main>

        <Outlet /> {/* Nested routes will render here */}

      </main>

      <footer>Footer Content</footer>

    </div>

  );

}

​

// Route Configuration with Layout

<Route path="/" element={<SharedLayout />}>

  <Route index element={<HomePage />} />

  <Route path="about" element={<AboutPage />} />

</Route>

​

الفرق

تمكن مسارات التخطيط من طريقة نظيفة قابلة لإعادة الاستخدام لتطبيق التخطيطات المشتركة عبر مسارات متعددة، دون تكرار الكود. يعمل Outlet كحامل للمسارات الفرعية، مما يجعل إدارة التخطيطات أسهل بكثير.

4. تحسين قدرات الت导向ية المت嵌اه

هناك طرق أكثر كفاءة للتعامل مع المسارات المت嵌اه، بما في ذلك وراثة عناصر التخطيط وتحسين استراتيجيات جلب البيانات.

في الإصدارات القديمة، كانت الرoutes الم嵌ة ممكنة، ولكن الإعداد كان أكثر تعقيدًا. كان عليك التعامل مع الرoutes الم嵌ة بشكل صريح داخل المكون الأم باستخدام useRouteMatch() للحصول على المسار الحالي، ثم تعريف الرoutes الم嵌ة يدويًا داخل المكون الأم. يمكن أن يصبح هذا النهج معقدًا بسرعة، خاصة في التطبيقات المعقدة التي تحتوي على عدة مستويات من الرoutes الم嵌ة.

مثال React Router v5

import { Route, useRouteMatch } from 'react-router-dom';

​

function Dashboard() {

  const { path } = useRouteMatch();

  return (

    <div>

      <h1>Dashboard</h1>

      <Route path={`${path}/overview`} component={Overview} />

      <Route path={`${path}/settings`} component={Settings} />

    </div>

  );

}

​

<Route path="/dashboard" component={Dashboard} />

​

في React Router 7، أصبحت الرoutes الم嵌ة الآن configure بشكل إعلاني، مباشرة داخل إعداد الرoutes، مما يبسط هيكل الت导向 ويجعل الكود أكثر قابلية للقراءة.

مثال React Router v7

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

​

function DashboardLayout() {

  return (

    <div>

      <h1>Dashboard</h1>

      <Outlet /> {/* Nested routes will render here */}

    </div>

  );

}

​

// Route Configuration

<Route path="/dashboard" element={<DashboardLayout />}>

  <Route path="overview" element={<Overview />} />

  <Route path="settings" element={<Settings />} />

</Route>

​

الفرق

في React Router 7، أصبحت الرoutes الم嵌ة أسهل في الإدارة لأنها define عند مستوى إعداد الرoutes باستخدام المكون Outlet. هذا الهيكل يعزز الفصل الواضح بين التخطيط والمحتوى.

5. تحسين التكامل مع Suspense

الآن، هناك دعم أفضل لـ React 18’s Suspense والعرض المتوازي لتحقيق تجارب تحميل أ smoother

في الإصدارات القديمة، كان الدعم المحدود لـ suspense مخصصًا فقط للكونponents المؤجل التحميل في الإصدارات القديمة، مما يحد من فائدته في سيناريوهات جلب البيانات المعقدة.

مثال React Router v5

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

const HomePage = lazy(() => import('./HomePage'));

​

<Suspense fallback={<div>Loading...</div>}>

  <Route path="/" component={HomePage} />

</Suspense>

​

React Router 7 يدمج Suspense مع المحمل و واجهات العمل، مما يسمح بجلب البيانات بشكل متزامن وسلس مع بذل مجهود قليل.

مثال React Router v7

import { Suspense } from 'react';

import { Route, Routes } from 'react-router-dom';

​

function App() {

  return (

    <Suspense fallback={<div>Loading...</div>}>

      <Routes>

        <Route path="/" element={<HomePage />} />

        <Route path="/about" element={<AboutPage />} />

      </Routes>

    </Suspense>

  );

}

​

الفرق

يستفيد React Router 7 من Suspense سواء في تحميل المكونات بشكل المتأخر أو في جلب البيانات، مما يتيح انتقالات ألسنة وسطح مستخدم أكثر استجابة.

الخاتمة

React Router 7 (أو الإصدار الأحدث) يعزز بشكل كبير من إدارة التوجيه في تطبيقات React من خلال تقديم عدة ميزات قوية. الواجهات الجديدة المحمل و واجهات العمل تتيح جلب البيانات بشكل تصريحي، مما يفصل منطق البيانات عن المكونات لتحقيق كود أنظف. مسارات التخطيط تبسط إدارة التخطيطات المشتركة وتقلل من التكرار. المسارات المتداخلة أكثر كفاءة وتعقلاً، مما يتيح هيكل أوضح. بالإضافة إلى ذلك، حدود الخطأ لكل مسار توفر معالجة خطأ دقيقة، مما يحسن من الموثوقية. التكامل الكامل مع React Suspense يدعم جلب البيانات السلس وتجربة المستخدم.بشكل عام، هذه التطورات تبسط تطوير تطبيقات React المعقدة والقابلة لل扩展 والأداء العالي، مما يجعل React Router 7 تحديثًا كبيرًا من الإصدارات السابقة.