React Router Dynamic Routes: روابط تحتوي ID

في التطبيقات الواقعية، ستحتاج صفحات ديناميكية مثل: صفحة تفاصيل منتج، مقال، أو ملف مستخدم.

بدل إنشاء صفحة لكل عنصر يدويًا، نستخدم Dynamic Routes لتوليد صفحات متعددة بناءً على ID أو slug.

ما هي Dynamic Routes في React Router؟

هي مسارات تحتوي جزءًا متغيرًا يبدأ بـ : مثل /products/:id.

التعريف البسيط: جزء ديناميكي في الرابط يُستبدل بقيمة حقيقية عند الاستخدام.

تعريف Route ديناميكي

<Route path="/products/:id" element={<ProductDetails />} />

هنا عرّفنا مسارًا يقبل رقم المنتج. أي رابط مثل /products/3 سيعرض نفس المكوّن.

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

قراءة القيمة باستخدام useParams

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

function ProductDetails() {
  const { id } = useParams();
  return <h2>تفاصيل المنتج رقم {id}</h2>;
}

useParams يرجع كائن يحتوي على القيم الديناميكية. هنا نقرأ id ونستخدمه داخل الصفحة.

إذا كان الرابط /products/7 فستكون قيمة id هي \"7\". يمكن بعدها استخدام هذه القيمة لجلب البيانات أو عرض عنوان مناسب.

ربط المستخدم بصفحة تفاصيل

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

function ProductList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <Link to={`/products/${item.id}`}>{item.title}</Link>
        </li>
      ))}
    </ul>
  );
}

هنا نُنشئ رابطًا ديناميكيًا لكل منتج. عند الضغط، ينتقل المستخدم لصفحة تفاصيل المنتج المحدد.

لاحظ أننا استخدمنا قالب النص `/products/${item.id}`، وهذا يضمن أن كل عنصر في القائمة يوجّه إلى مساره الخاص.

جلب بيانات حسب id

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

function ProductDetails() {
  const { id } = useParams();
  const [product, setProduct] = useState(null);

  useEffect(() => {
    fetch(`/api/products/${id}`)
      .then((res) => res.json())
      .then((data) => setProduct(data));
  }, [id]);

  if (!product) return <p>جاري التحميل...</p>;

  return <h2>{product.title}</h2>;
}

عندما يتغير id، ننفّذ طلبًا جديدًا لجلب البيانات. هذا يجعل الصفحة تعرض تفاصيل المنتج الصحيح دائمًا.

وضعنا id داخل dependency array حتى يتم إعادة الجلب إذا انتقل المستخدم من منتج لآخر دون إعادة تحميل الصفحة. بهذه الطريقة تبقى البيانات متزامنة مع الرابط.

أخطاء شائعة

• نسيان وضع : قبل اسم المتغير في المسار.
• نسيان إضافة id في dependency array داخل useEffect.
• استخدام رابط ثابت بدل الديناميكي في Link.

الأسئلة الشائعة — FAQ

ما هي Dynamic Routes في React Router؟

هي مسارات تحتوي جزءًا متغيرًا مثل /products/:id.

ما هو useParams؟

هو Hook لقراءة القيم الديناميكية من الرابط.

كيف أرسل المستخدم لصفحة تفاصيل؟

استخدم Link مع مسار يحتوي على id مثل /products/5.

هل يمكن استخدام slug بدل id؟

نعم، يمكن أن تكون القيمة نصًا مثل /blog/react-hooks.

متى أستخدم useParams مع fetch؟

عندما تحتاج لجلب بيانات حسب ID من الرابط.