هوک useNavigate در ری اکت برای ریدایرکت کاربر
کتابخانه React Router یکی از محبوبترین کتابخانه های ری اکت برای مبحث Routing در ری اکت به حساب میاد. بطور خلاصه از هوک useNavigate در ری اکت میتونیم برای ریدایرکت در ری اکت ( جابجایی کاربر بین صفحات ) استفاده کنیم.
. این کتابخونه توی نسخه آخر خودش قابلیت ها و هوک های جدیدی معرفی کرد که یکی از اونها هوک useNavigate بود .
هوک useNavigate در ورژن 6 کتابخانه React Router معرفی شد . تا قبل از این نسخه ، از هوک useHistory برای ریدایرکت کاربران استفاده میکردیم که در نسخه های فعلی این کتابخانه منسوخ شده است .
هوک useNavigate نسبت به هوک useHistory که قبلا از آن استفاده میکردیم تغییرات بسیار زیادی داشته است و علاوه بر بهینه تر شدن ، با آخرین نسخه ری اکت نیز سازگاری کامل دارد .
چطور از هوک useHistory در ری اکت استفاده کنیم ؟
مرحله 1
قبل از هرچیز ، با استفاده از دستور زیر کتابخانه 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
مرحله 2
تنظیمات اولیه کتابخانه React Router
بعد از نصب React Router نیاز است که این کتابخانه را به پروژه خود معرفی کنیم . برای اینکار لازم است که وارد فایل روت پروژه (index.js) شویم و React Router را به عنوان Wrapper به کل اپیکیشن معرفی کنیم .
دقیقا مطابق مثال زیر :
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
اگر در مورد خط 8 ( StrictMode ) چیزی نمیدانید مقاله StrictMode در ری اکت را مطالعه کنید .
بریم یکم تخصصی تر React Router رو بررسی کنیم 🙂
قابلیت BrowserRouter در React Router چیست ؟
هدف ما از استفاده از React Router ، اجرای Rounting در مرورگر است . به همین دلیل است که در خط 9 از BrowserRouter استفاده کرده ایم .
مرحله 3
اضافه کردن مسیر ( Route ) های صفحات
پس از طی کردن مراحل بالا یعنی نصب React Router و اتصال آن به اپیکیشن React خودمون ، لازم هست که مسیر صفحات پروژمون رو مشخص کنیم .
بطور مثال مشخص کنیم که صفحه Shop چه آدرسی توی url باید داشته باشه و هنگامی که کاربر وارد shop/ شد ، چه کامپوننتی بهش نمایش داده بشه .
برای اینکه Route ها ( مسیر صفحات ) رو مشخص کنیم ، مطابق مثال زیر در فایل App.js عمل کنید :
import { Route, Routes } from "react-router-dom";
import { Home } from "./pages/home"
import { AboutUs } from "./pages/about"
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<AboutUs />} />
</Routes>
</div>
);
}
در خط 10 تیکه کد بالا ، مشخص کرده ایم که اگر کاربری وارد صفحه اصلی سایت ما شد ، کامپوننت Home به او نمایش داده شود .
در خط 11 تیکه کد بالا ، مشخص کرده ایم که اگر کاربری وارد آدرس about/ شد ، کامپوننت AboutUs به او نمایش داده شود .
مطابق همین مثال ، میتوانید تمامی صفحات مورد نیاز خودتون رو اضافه کنید .
مرحله 4
چطور از هوک useNavigate در ری اکت استفاده کنیم ؟
حالا که نصب و تنظیمات اولیه React Router به اتمام رسید ، میتونیم بریم سراغ استفاده از useNavigate 🙂
هوک useNavigate به ما کمک میکنه که مکان فعلی کاربر را تغییر دهیم ( کاربر را ریدایرکت کنیم )
فرض کنید کاربر در صفحه Home قرار دارد . به کمک useNavigate میتوانیم کاربر را از این صفحه به صفحات دیگر مثل Shop ریدایرکت کنیم ( مثلا وقتی که روی دکمه فروشگاه کلیک کرد این اتفاق بیوفتد )
ابتدا useNavigate را از react-router-dom فراخوانی میکنیم .
import { useNavigate } from "react-router-dom";
حالا ویژگی navigate را از useNavigate بیرون میکشیم . با انجام اینکار دیگر نیاز نیست هردفعه از useNavigate استفاده کنیم و میتوانیم از navigate استفاده کنیم .
const navigate = useNavigate();
حالا میتوانیم از navigate استفاده کنیم . در مثال زیر من یک تابع دارم و میخوام زمانیکه این تابع اجرا شد کاربر به صفحه success ریدایرکت شود . درصورتیکه اروری وجود داشت به صفحه error ریدایرکت شود.
const submitHandler = async () => {
try {
await submitForm();
navigate("/success"); // در اینجا کاربر به آدرس ذکر شده ریدایرکت میشود
} catch (error) {
navigate("/error", { state: { message: "Failed to submit form" } }); // در اینجا کاربر به آدرس ذکر شده ریدایرکت میشود . نکته اینکه ما یک پارامتر اضافی هم پاس دادیم که در صفحه مقصد میتوانیم از آن استفاده کنیم.
}
};
وتمام 🙂
کد کامل مراحل ذکر شده بصورت زیر است :
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const submitHandler = async () => {
try {
await submitForm();
navigate("/success");
} catch (error) {
navigate("/error", { state: { message: "متاسفانه مشکلی پیش آمد" } });
}
};
خط 1
در اینجا هوک useNavigate را از کتابخانه react-router-dom فراخوانی کرده ایم.
خط 2
در اینجا ویژگی navigate را از useNavigate بیرون کشیده ایم.
خط 3
اینجا یک تابع داریم که ریدایرکت کاربر را در آن انجام میدهیم . این تابع زمانیکه فرم ما submit شد اجرا میشود . شما میتوانید هر تابع دلخواهی را بجای این تابع بسازید.
خط 6
جهت ریدایرکت کاربر در react به اینصورت عمل میکنیم. در اینجا کاربر به آدرس success/ ریدایرکت میشود .
خط 8
در اینجا کاربر به آدرس error/ ریدایرکت میشود. دقت کنید که navigate دو پارامتر دریافت میکند . پارامتر اول آدرس صفحه مقصد است و پارامتر دوم که اختیاری است میتواند یک مقدار باشد که ما نیاز داریم در صفحه مقصد از آن استفاده کنیم .برای دسترسی به پیام ارسال شده از صفحه مبدا به صفحه مقصد کافیست از هوک useLocation در صفحه مقصد استفاده کنید :
const location = useLocation();
console.log(location.state)
// اینجا پیغامی که از صفحه مبدا برای صفحه مقصد فرستاده شده است نمایش داده میشود
ویرایش URL فعلی با useNavigate
با استفاده از هوک useNavigate در ری اکت میشه موقعیت فعلی کاربر رو بر اساس موقعیت قبلیش تغییر داد .
مثلا با استفاده از تیکه کد زیر میتونید کاربر رو به صفحه قبلی خودش بفرستید :
navigate(-1)
این تیکه کد ، حکم همون دکمه برگشت مرورگر رو داره و دقیقا مثل همون عمل میکنه .
جمع بندی
هوک useNavigate ری اکت ، یکی از مهمترین و کاربردی ترین هوک های React برای مبحث Routing بحساب میاد که در حال حاضر 9 میلیون دانلود هفتگی داره .
کاربرد اصلی این هوک جابجایی کاربران بین صفحه های مختلف ( ریدایرکت ) هست .
اگه React Developer هستید لازمه که استفاده اصولی از این هوک رو بدونید و تو پروژه هاتون ازش استفاده کنید 🙂
کاربرد اصلی هوک useNavigate در ری اکت ریدایرکت کاربر ( جابجایی بین صفحات ) میباشد .
توسط این هوک که زیرمجموعه کتابخانه react router میباشد میتوانید کاربر خود را بین صفحات مختلف منتقل کنید .
این هوک در نسخه 6 این کتابخانه معرفی و ارائه شد .
8 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
چقدر عالی و ساده توضیح داده بودین دمتون گرم
سلام و درود ، زنده باشین 🙂
بدون اغراق خیلی خوب توضیح میدید و بسیار خوبه که میگید هر هوک برای چه کارهایی انجام میشه. ممنون
سلام خیلی ممنونم از نظر قشنگت و خیلی خیلی خوشحالم که برات مفید واقع شده 🙂
موفق باشی
قربون، خیلی این توضیحاتت جامع و ساده بود.موفق باشی
سلام مهدی جان 🙂
خوشحالم که برات مفید واقع شده 🙂
موفق باشی
ممنون از توضیحات خوبتون
خوشحالم که براتون مفید واقع شده 🙂
موفق باشی