• 0

كيفية معرفة المسار الحالي في React - Gatsby؟

 

أقوم حاليًا بإنشاء مشروع بإستخدام React و Gatsby وأود تغير المحتوى بناءً على عنوان url الحالي، في السابق كان يمكنني أن أستعمل الكود التالي لمعرفة مسار الصفحة الحالية:

currentPath = this.props.location.pathname

لكن بداية من Gatsby v2 لم يعد هذا الأمر متاحًا حيث أصبح يتم أستعمال @reach/router

كيف أعرف المسار الحالي بإستخدام @reach/router

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكنك تضمين useLocation من @reach/router و من ثم قراءة القيمة على هذا النحو :

import * as React from 'react';
import { useLocation } from '@reach/router';


const Current = () => {
  const location = useLocation();
  
  console.log(location);  
};

سيتم طباعة كائن يسهل قراءة الخواص منه على هذا النحو : 

{
     pathname: "/", 
     href: "http://localhost:8000/", 
     origin: "http://localhost:8000"
}

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

أنا أستخدم النسخة 3.4.1 من gatsby و location متاح وهي النسخة الاخيرة 

import * as React from 'react';


// markup
const IndexPage = ({ location }) => {
  console.log(location);
  return (
    <main >
      <title>Home Page</title>
      <div>{location.pathname}</div>
    </main>
  );
};

export default IndexPage;

لكن اذا كنت تستخدم نسخة مغايرة يمكنك استخدام ال useLocation

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

لابد لنا من أن نحدد أولا نقطتين رئيسين  

  1. أننا نريد تنفيذ ذلك في الجزء الخاص ب client side بعد تمام عملية بناء المشروع 
  2. إذا ما كنا نريد إستخدام ذلك داخل "page" أم مكون 
  • في حالة كنت تريد إستخدام ذلك داخل page فيمكنك بالفعل إستخدام نفس الطريقة التي كنت تتبعها مع الأخذ في الإعتبار أنك لا تتعامل مع كلاس في هذه الحاله بحيث يمكنك الحصول على "location" من ال "props" حيث يتم إعطاء ال location لكل صفحة موجوده داخل المجلد pages في Gatsby وبالتالي يمكنك إستخدام ال location كالتالي 
const HomePage = ({ location }) => {
  console.log(location.pathname);
  return (<div></div>);
};
  • في حالة كنت تريد تطبيق ذلك داخل مكون ف يمكنك في هذه الحالة إستخدام "useLocation" المقدم من "@reach/router" حيث يعطي الإمكانيه للمكون في هذه الحاله في إستخدام ال location
    import * as React from 'react';
    import { useLocation } from '@reach/router';
    
    
    const ComponentName = () => {
      const location = useLocation();
      console.log(location.pathname);  
      return (<div></div>)
    };

     

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

    const location = typeof window !== 'undefined' ? window.location : '';

     

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن