اذهب إلى المحتوى
  • 0

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

Adam Ebrahim

السؤال

 

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

currentPath = this.props.location.pathname

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

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

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

Recommended Posts

  • 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 : '';

     

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...