اجرا نشدن استایل navLink

امیر منصور اقدسی

سلام دوست من

 نحوه style دهی تون اشتباه هست خود اون callback که isActive رو ازش destructure کردین داره یک object که حاوی style های شما هست رو برگشت میده و این که به صورت شرطی داخل این object یک شی دیگه حاوی style هاتون قرار بدید درست نیست و کار نخواهد کرد بلکه:

نکته: همون طور که عرض شد شما نمیتونید داخل اون object که خودش داره از callback برگشت داده میشه object های دیگه ای برگشت بدید چون این Object خودش باید حاوی style باشه بلکه برای این موارد باید در نقطه ای که object استایل داره برگشت داده میشه نسبت به شرط دو object مجزا return کنید.

اگر میخواید نسبت به شرط active بودن دو object مختلف رو که حاوی style های مختلف هست رو قرار بدید به این شکل:

<NavLink
  to="users"
  style={({ isActive }) =>
    isActive
      ? {
          color: '#fff',
          background: '#7600dc',
        }
      : { color: '#545e6f', background: '#f0f0f0' }
  }
>
  Users
</NavLink>

و یا اگر style های شما کلی هستند و میخواید تنها یکی دو مورد رو بسته به شرط تغییر بدید به این شکل:

<NavLink
  to="users"
  style={({ isActive }) => ({
    color: isActive ? '#fff' : '#545e6f',
    background: isActive ? '#7600dc' : '#f0f0f0',
  })}
>
  Users
</NavLink>

شاید در نگاه اول تفاوتی حس نکنید ولی اگر به کد های من دقت کنید دقیقا متوجه تفاوت خواهید شد
.
موفق و باشید

یونس قربانی

سلام دوست من

دوست عزیزمون کامل راهنمایی کردن که باید مشکلتون رو برطرف کنه

موفق باشید