0
سبد خرید من 0 دوره
سبد خرید شما خالیست :(
پرسش

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

Read the current full URL with React

من دارم از React برای ساخت یه اپلیکیشن استفاده می‌کنم و می‌خوام آدرس کامل فعلی (Full URL) رو توی مرورگر بخونم
چطور می‌تونم با استفاده از React این کار رو انجام بدم؟ لطفاً یه راه ساده و واضح بهم پیشنهاد بدین.

1403/05/31
پاسخ
محمدامین سعیدی راد
بیوگرافی محمدامین سعیدی راد

برای اینکه آدرس کامل فعلی رو توی 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;
پاسخ: 1403/05/31
آخرین آپدیت: 1403/07/19