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

يمكنك تضمين 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"
}

أنا أستخدم النسخة 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

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

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