چطور لینک فعال را در React-Router مشخص کنیم؟

فرض کنید سایت ما منویی دارد که می خواهیم کاربر با ورود به صفحات سایت، لینک مربوط به صفحه مورد نظر در منو به حالت فعال دربیاید. برای مثال وقتی کاربر در صفحه اصلی سایت است لینک خانه (Home) به‌صورت پیش‌فرض فعال باشد.

در React-Router نسخه 4 به بعد ، برای استفاده از قابلیت‌های استایل‌دهی براساس فعال بودن لینک‌ها، باید از کامپوننت NavLink به جای Link استفاده کنید. NavLink به شما این امکان را می‌دهد که حالت فعال را به لینک‌ها اضافه کنید و در عین حال استایل های مختلف را مدیریت کنید. برای اطمینان از اینکه لینک خانه در ابتدا بصورت فعال نمایش داده می‌شود، باید از ویژگی exact برای لینک استفاده کنید تا فقط زمانی حالت فعال شود که آدرس دقیقاً با مسیر آن مطابقت داشته باشد.

کد شما می‌تواند به صورت زیر تغییر کند:

      const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact activeClassName='is-active' to='/'>Home</NavLink>
        <NavLink activeClassName='is-active' to='/about'>About</NavLink>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
);

    

با استفاده از exact، اطمینان حاصل می‌کنید که لینک خانه فقط زمانی فعال است که URL دقیقاً با / مطابقت دارد. اگر این ویژگی را حذف کنید، احتمالاً لینک خانه همیشه فعال باقی می‌ماند زیرا هر مسیری که با / آغاز شود، با / نیز مطابقت خواهد داشت.

در نسخه‌های جدیدتر (نسخه ۶ و بالاتر) از React-Router، می‌توانید از ویژگی className که یک تابع می‌پذیرد و به شما امکان می‌دهد بر اساس وضعیت لینک استایل‌های مختلف اعمال کنید، استفاده کنید. کد زیر یک مثال از این قابلیت را نشان می‌دهد:

      <NavLink
  to="/about"
  className={({ isActive }) => (isActive ? 'active' : 'inactive')}
>
  About
</NavLink>

    

همچنین، برای لینک‌هایی با مسیرهای تو در تو، توجه داشته باشید که ممکن است نیاز باشد از ویژگی exact در NavLink هم استفاده کنید تا رفتار مطابق انتظار ارائه شود. با تخصیص کلاس‌های مختلف برای حالت‌های فعال و غیرفعال، می‌توانید به راحتی استایل لینک‌ها را مدیریت کنید.