چطور در React Router با کدنویسی به صفحه دیگری برویم؟

تغییر صفحه بوسیله برنامه نویسی در React Router به نسخه مورد استفاده شما بستگی دارد. در زیر روش‌های مختلف برای نسخه‌های مختلف React Router توضیح داده شده است:

در React Router v6 و بالاتر:

ساده‌ترین روش استفاده از قلاب useNavigate است. این قلاب تابعی را برمی‌گرداند که برای تغییر صفحه با کد نویسی استفاده می‌شود. مثال زیر نحوه استفاده از این قلاب را نشان می‌دهد:

      import { useNavigate } from "react-router-dom";

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/home"); // یا هر مسیر دیگری
  };

  return (
    <button onClick={handleClick}>
      برو به خانه
    </button>
  );
}

    

پارامتر دوم اختیاری به navigate اجازه می‌دهد تا رفتار replace را مشخص کند. با تعیین replace: true ، ورودی فعلی در پشته تاریخچه جایگزین می‌شود و به آن اضافه شدن نمی شود. یعنی با زده دکمه بازگشت به صفحه فعلی (صفحه ای که درون آن navigate را صدا کرده ایم) نمی رویم بلکه به صفحه قبلی می رویم.

در React Router v5.1.0 و بالاتر (با قلاب‌ها و React >16.8):

در این نسخه می‌توان از قلاب useHistory استفاده کرد. این قلاب مشابه useNavigate عمل می‌کند، اما در نسخه‌های قدیمی‌تر استفاده می‌شود.

در React Router v4:

سه روش برای ناوبری بوسیله کد نیوسی در این نسخه وجود دارد:

• استفاده از Higher-Order Component این کامپوننت آبجکت history را به عنوان یک prop به کامپوننت شما تزریق می‌کند. با استفاده از این روش به راحتی می‌توانید از متدهای push و replace استفاده کنید.
• استفاده از Composition و رندر کردن می‌توانید یک Route بدون مسیر تعریف کنید که همیشه با مکان فعلی مطابقت دارد. این روش propهای مشابه withRouter را ارائه می‌دهد.
• استفاده از Context: این روش توصیه نمی‌شود مگر اینکه با Context API React آشنا باشید.

نسخه‌های قدیمی‌تر React Router (v3، v2، v1 و 0.13):

روش‌های ناوبری در نسخه‌های قدیمی‌تر پیچیده‌تر است و اغلب نیاز به استفاده از this.props.history، this.props.router یا mixin Navigation دارد. با این حال، استفاده از نسخه‌های جدیدتر React Router به شدت توصیه می‌شود، زیرا کد تمیزتر و راحت‌تری ارائه می‌دهند.

نکته مهم: this.props.history فقط در کامپوننت‌هایی که توسط <Route> رندر می‌شوند در دسترس است. برای استفاده از آن در کامپوننت‌های فرزند، باید آن را به عنوان prop منتقل کرد. همچنین توجه داشته باشید که در برخی از نسخه‌های قدیمی‌تر از context.router.transitionTo استفاده میشد.

به طور خلاصه، استفاده از useNavigate در React Router v6 و بالاتر ساده‌ترین و توصیه‌شده‌ترین روش برای ناوبری برنامه‌ریزی شده است. برای نسخه‌های قدیمی‌تر، باید از روش‌های مناسب آن نسخه استفاده شود.