ماهو خطاف useLocation

useLocation هو خطاف من مكتبة react-router-dom يُستخدم للحصول على معلومات عن الرابط الحالي (URL) في تطبيق React.

مثال:

import React from "react"; 
import { useLocation } from "react-router-dom"; 
const PageInfo = () => { 
  const location = useLocation(); 
  return ( 
    <div> 
    	<h2>أنت الآن في:</h2> 
    	<p>المسار: {location.pathname}</p> 
		<p>الاستعلام: {location.search}</p> 
	</div> 
	); 
}; 
export default PageInfo;

إذا كنت على هذا الرابط:

http://localhost:3000/products?category=shoes

سيُطبع لك:

المسار: /products 
الاستعلام: ?category=shoes

بالتوفيق

ذلك خطاف من مكتبة react-router-dom يوفر معلومات كاملة عن الرابط الحالي الذي يتصفحه المستخدم داخل تطبيقك، وفي الواقع العملي ستستخدمه في معرفة الصفحات التي يزورها المستخدمون لإرسال تلك المعلومات إلى خدمات مثل Google Analytics مثلاً.

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';
import { analytics } from './analytics-service'; 

function AnalyticsTracker() {
  const location = useLocation();

  useEffect(() => {
    console.log(`المستخدم زار الصفحة: ${location.pathname}`);
    analytics.trackPageView(location.pathname + location.search);
  }, [location.pathname]);

  return null;
}

أو في حال لديك صفحة لعرض المنتجات، وتريد السماح للمستخدم بفلترة النتائج حسب الفئة والسعر، فستظهر تلك الفلاتر في الرابط، أي كالتالي (/products?category=laptops&sort=price_asc) وبناءًا عليها تقوم بطلب البيانات من قاعدة البيانات عن طريق توظيف location.search مع URLSearchParams المتوفر في المتصفح كـ API.

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

function ProductListPage() {
  const location = useLocation();
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const queryParams = new URLSearchParams(location.search);
    const category = queryParams.get('category'); 
    const sortBy = queryParams.get('sort'); 

    console.log(`جلب المنتجات من الفئة: ${category}, مرتبة حسب: ${sortBy}`);

    // هنا تقوم بطلب البيانات من الـ API بناءً على هذه المتغيرات
     fetchAPI(`/api/products?category=${category}&sort=${sortBy}`)
      .then(data => setProducts(data));

  }, [location.search]); /

  return (
    <div>
    
    </div>
  );
}

أو لو لديك صفحة قائمة المنتجات، وعندما يضغط المستخدم على منتج، تريد إرسال بيانات هذا المنتج (الاسم، السعر، الصورة) إلى صفحة تفاصيل المنتج لتظهر فوراً بينما يتم تحميل باقي التفاصيل، فستعتمد على location.state:

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

function ProductItem({ product }) {
  return (
    // نستخدم الخاصية "state" في مكون Link
    <Link to={`/products/${product.id}`} state={{ productData: product }}>
      <div>
        <h3>{product.name}</h3>
        <p>{product.price}</p>
      </div>
    </Link>
  );
}

ثم استقبال البيانات في صفحة تفاصيل المنتج:

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

function ProductDetailPage() {
  const location = useLocation();
  const { id } = useParams();
  
  const initialData = location.state?.productData;
  const [product, setProduct] = useState(initialData);

  useEffect(() => {

    if (!product) {
      console.log("البيانات غير موجودة في state، جاري طلبها من الـ API...");
      fetchAPI(`/api/products/${id}`).then(data => setProduct(data));
    }
  }, [id, product]);

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

  return (
    <div>
      <h1>{product.name}</h1>
      <p>السعر: {product.price}</p>

    </div>
  );
}

كذلك لو لديك صفحة إعدادات بها عدة تبويبات مختلفة Profile, Account, Notifications وتريد أن يكون الرابط هو الذي يحدد أي قسم يتم عرضه، بمعنى أي قسم يجب أن يكون نشطًا بناءًا على الرابط؟

فستحتاج إلى استخدام location.pathname أو location.hash.

انا استخدمت الخطاف useLocation  في اضافة تأثير active  في شريط تنقل navbar

بتاريخ On 14‏/7‏/2025 at 17:14 قال Hxfhf Ucicic:

انا استخدمت الخطاف useLocation  في اضافة تأثير active  في شريط تنقل navbar

نعم لامشكلة في ذلك يمكنك بالطبع إستخدام useLocation لمعرفة المسار الحالي وتحديد العنصر active المناسب في ال navbar .

هكذا مثلا :

import { NavLink, useLocation } from 'react-router-dom';

function Navbar() {
  const location = useLocation();

  return (
    <nav>
      <ul>
        <li className={location.pathname === '/' ? 'active' : ''}>
          <NavLink to="/">الرئيسية</NavLink>
        </li>
        <li className={location.pathname === '/about' ? 'active' : ''}>
          <NavLink to="/about">من نحن</NavLink>
        </li>
        <li className={location.pathname === '/contact' ? 'active' : ''}>
          <NavLink to="/contact">اتصل بنا</NavLink>
        </li>
      </ul>
    </nav>
  );
}

وتوجد طرق أسهل من ذلك لتحديد العنصر active وذلك من خلال إستخدام NavLink حيث يدعم الخاصية activeClassName في React Router v5 أو إستخدام className ك callback في الإصدار v6 لتحديد العنصر النشط.

هكذا مثلا في الإصدار 5 :

<NavLink className=""
 activeClassName="active"
 to="/about">
  من نحن
</NavLink>

وفي الإصدار 6 التالي :

<NavLink 
  to="/about" 
  className={({ isActive }) => isActive ? 'active' : ''}
>
  من نحن
</NavLink>