خواندن آدرس کامل فعلی با React

برای اینکه آدرس کامل فعلی رو توی React بخونی، می‌تونی از window.location.href استفاده کنی. این دستور کل آدرس URL فعلی رو برمی‌گردونه که شامل پروتکل (مثل HTTP یا HTTPS)، نام دامنه و مسیری که داری، می‌شه.

حالا بریم سراغ یه مثال کوچیک:

import React from 'react';
const MyComponent = () => {
const fullUrl = window.location.href;
return (
<div>
<p>Current URL is: {fullUrl}</p>
</div>
);
};
export default MyComponent;

در این مثال، ما با استفاده از window.location.href آدرس کامل رو توی متغیر fullUrl ذخیره کردیم و بعدش اون رو داخل یک <p> توی JSX نشون دادیم.

این راه خیلی مستقیم و ساده است، اما یه نکته مهم هم وجود داره که باید بهش توجه کنی: این کد فقط توی مرورگر کار می‌کنه. اگه داری از سرور-side rendering (SSR) مثل Next.js استفاده می‌کنی، این کد ممکنه توی سرور خطا بده چون window فقط توی مرورگر در دسترسه.

برای حل این مشکل توی SSR، باید حواست باشه که این کد فقط توی کلاینت اجرا بشه:

import React from 'react';
const MyComponent = () => {
if (typeof window !== 'undefined') {
const fullUrl = window.location.href;
return (
<div>
<p>Current URL is: {fullUrl}</p>
</div>
);
}
return null;
};
export default MyComponent;