پرسش

تفاوت بین Route exact path و Route path در React چیه؟

React: Difference between Route exact path and Route path

من دارم با React کار می‌کنم و از react-router استفاده می‌کنم. تفاوت بین Route exact path و Route path چیه؟ تو بعضی از مثال‌ها دیدم که از exact استفاده می‌کنن و تو بعضی‌ها نه. این exact دقیقا چه کاری انجام می‌ده و کِی باید ازش استفاده کنم؟

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

وقتی که از Route path به تنهایی استفاده می‌کنی، هر آدرسی که با path تعریف شده مطابقت داشته باشه (حتی اگه آدرس دقیقا برابر نباشه)، کامپوننت مربوط به اون مسیر رندر می‌شه. به عبارتی، اگر path یه بخشی از آدرس باشه، اون مسیر به عنوان مسیر درست شناخته می‌شه.

مثال:

<Route path="/about" component={About} />

در این مثال، مسیر /about, /about-us, /about/team و غیره، همه باعث می‌شن که کامپوننت About رندر بشه، چون همه این آدرس‌ها با /about شروع می‌شن.

حالا، اگر بخوای فقط وقتی که آدرس دقیقا /about هست، کامپوننت About رندر بشه و برای بقیه آدرس‌های مشابه (مثل /about-us) این اتفاق نیفته، باید از exact استفاده کنی.

مثال با exact:

<Route exact path="/about" component={About} />

با استفاده از exact، حالا فقط وقتی که آدرس دقیقا برابر با /about باشه، کامپوننت About رندر می‌شه و برای بقیه مسیرها (مثل /about-us یا /about/team) این اتفاق نمی‌افته.

به زبان ساده، exact باعث می‌شه که تطابق مسیر به طور دقیق انجام بشه و فقط آدرس‌های دقیقا مطابق با path رو رندر کنه. این ویژگی وقتی مفیده که بخوای مسیرهای مشابه رو به صورت جداگانه مدیریت کنی و نخوای هر مسیری که شبیه به path اصلی هست، به طور ناخواسته رندر بشه.

پاسخ: 1403/06/05
آخرین آپدیت: 1403/08/10