هوک useNavigate تو React چیه ؟

کتابخانه React Router یکی از محبوبترین کتابخانه های ری اکت برای مبحث Routing در ری اکت به حساب میاد. بطور خلاصه از هوک useNavigate در ری اکت میتونیم برای ریدایرکت در ری اکت ( جابجایی کاربر بین صفحات ) استفاده کنیم.

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

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

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

چطور از هوک useHistory در ری اکت استفاده کنیم ؟

قبل از هرچیز ، با استفاده از دستور زیر کتابخانه React Router رو توی پروژه React خودتون نصب کنید که امکان استفاده از useNavigate رو داشته باشیم :

# For NPM
 npm install react-router-dom

# For YARN
yarn add react-router-dom

# For PNPM
pnpm add react-router-dom

تنظیمات اولیه کتابخانه React Router

بعد از نصب React Router نیاز است که این کتابخانه را به پروژه خود معرفی کنیم . برای اینکار لازم است که وارد فایل روت پروژه (index.js) شویم و React Router را به عنوان Wrapper به کل اپیکیشن معرفی کنیم .

دقیقا مطابق مثال زیر :

import ReactDOM from &quotreact-dom/client"
import { BrowserRouter  } from &quotreact-router-dom"
import App from &quot./App"

const root = ReactDOM.createRoot(document.getElementById(&quotroot&quot));

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

بریم یکم تخصصی تر React Router رو بررسی کنیم ?

قابلیت BrowserRouter در React Router چیست ؟

هدف ما از استفاده از React Router ، اجرای Rounting در مرورگر است . به همین دلیل است که در خط 9 از BrowserRouter استفاده کرده ایم .

اضافه کردن مسیر ( Route ) های صفحات
پس از طی کردن مراحل بالا یعنی نصب React Router و اتصال آن به اپیکیشن React  خودمون ، لازم هست که مسیر صفحات پروژمون رو مشخص کنیم .بطور مثال مشخص کنیم که صفحه Shop چه آدرسی توی url باید داشته باشه و هنگامی که کاربر وارد shop/ شد ، چه کامپوننتی بهش نمایش داده بشه .برای اینکه Route ها ( مسیر صفحات ) رو مشخص کنیم ، مطابق مثال زیر در فایل App.js عمل کنید :

import { Route, Routes } from &quotreact-router-dom"
import { Home } from &quot./pages/home&quot
import { AboutUs } from &quot./pages/about&quot


function App() {
  return (
    <div className=&quotApp&quot>
      <Routes>
        <Route path=&quot/&quot element={<Home />} />
        <Route path=&quot/about&quot element={<AboutUs />} />
      </Routes>
    </div>
  );
}

در خط 10 تیکه کد بالا ، مشخص کرده ایم که اگر کاربری وارد صفحه اصلی سایت ما شد ، کامپوننت Home به او نمایش داده شود .

در خط 11 تیکه کد بالا ، مشخص کرده ایم که اگر کاربری وارد آدرس  about/ شد ، کامپوننت AboutUs به او نمایش داده شود .

مطابق همین مثال ، میتوانید تمامی صفحات مورد نیاز خودتون رو اضافه کنید .

چطور از هوک useNavigate در ری اکت استفاده کنیم ؟

حالا که نصب و تنظیمات اولیه React Router به اتمام رسید ، میتونیم بریم سراغ استفاده از useNavigate ?

هوک useNavigate به ما کمک میکنه که مکان فعلی کاربر را تغییر دهیم ( کاربر را ریدایرکت کنیم )

برای مشاهده ادامه آموزش بصورت بصورت ( و جهت حمایت از فرانت اندی ) لطفا روی لینک زیر کلیک کنید :

آموزش هوک useNavigate در ری اکت

FrontEndi.com