آشنایی با تازه های React Router 6 — راهنمای کاربردی

React Router با اختلاف زیادی محبو‌ب‌ترین کتابخانه در اکوسیستم ری‌اکت محسوب می‌شود. بر اساس آمار npm این کتابخانه هر هفته 3.6 میلیون بار دانلود می‌شود. این عدد تقریباً برابر با نصف دانلود خود کتابخانه React یعنی 7.6 میلیون بار در هفته است. به عبارت دیگر تقریباً از هر دو پروژه ری‌اکت، یکی از ری‌اکت روتر استفاده می‌کند. در ادامه این راهنما با تازه های React Router 6 آشنا خواهیم شد.

چنان که اشاره کردیم تقریباً نیمی از پروژه‌های ری‌اکت از ری‌اکت روتر برای مسیریابی در پروژه‌های خود استفاده می‌کنند. اگر تاکنون با ری‌اکت کار کرده باشید، به احتمال بالا از ری‌اکت روتر نیز بهره گرفته‌اید.

اینک و معرفی نسخه شش بتای این کتابخانه و انتشار قریب‌الوقوع نسخه نهایی، چه خوب است که نگاهی به تازه‌های React Router 6 بیندازیم و مواردی که در نسخه جدید تغییر یافته‌اند را بشناسیم.

ری‌اکت روتر شاکیان زیادی دارد

ری‌اکت روتر به عنوان یک کتابخانه که برای جامعه ری‌اکت بسیار مهم است، شاهد تغییرات ناسازگار و نسخه‌های زیادی بوده است. از ابتدای انتشار این کتابخانه در سال 2014 و در هر نسخه major، افرادی که وظیفه نگهداری ری‌اکت ‌روتر را دارند، قابلیت‌ها و تغییرهای ناسازگار با نسخه‌های قبلی جدیدی را معرفی کرده‌اند. برخی افراد در جامعه ری‌اکت در مورد دشواری ارتقا دادن از یک نسخه به نسخه بعد شکایت می‌کنند و این تغییرات مداوم کتابخانه را زیر سؤال برده‌اند. به طور کلی افراد زیادی در خصوص دشواری‌های ارتقا با هر بار انتشار یک نسخه major شکایت دارند.

همه افراد به ارتقا نیاز ندارند

اگر اپلیکیشن شما به درستی کار می‌کند و نیازی به دسترسی به قابلیت‌های جدید نسخه 6 ندارید، می‌توانید همچنان از نسخه قدیمی استفاده کنید. در این حالت نیازی به ریفکتور اپلیکیشن‌های قدیمی برای استفاده از ری‌اکت روتر 6 وجود ندارد. به طور خلاصه سری که درد نمی‌کند را دستمال نمی‌بندند.

تازه‌های نسخه جدید چیست؟

اینک بدون هر گونه توضیح اضافی به بررسی تازه‌ها و تغییرات آخرین نسخه ری‌اکت روتر می‌پردازیم.

فیلم آموزش ری اکت روتر React Router برای مسیریابی بین صفحات وب در فرادرس

کلیک کنید

Routes جایگزین Switch شده است

Routes به عنوان یک عنصر جدید در نسخه 6 ری‌اکت روتر معرفی شده است. این عنصر جدید به ما امکان می‌دهد که به سادگی مسیرهای تودرتو و مسیرهای مرتبط را تعریف کنیم و به راحتی مسیرهای پیچیده‌ و لی‌آوت‌ها را بسازیم. در نسخه قبلی این کتابخانه باید Routes را درون یک switch تعریف می‌کردیم.

Routes و links با والدشان ارتباط دارند

اکنون همه Route-ها و فرزندان Link مربوط به Route-ها با والد خود در ارتباط هستند. این وضعیت موجب می‌شود که ساخت اپلیکیشن‌هایی با مسیرهای تودرتوی زیاد آسان‌تر شده و تحلیل منطق مسیریابی در اپلیکیشن به کاری راحت تبدیل شود.

1import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
2
3function App() {
4  return (
5    <BrowserRouter>
6      <Routes>
7        <Route path="/" element={<Home />} />
8        <Route path="customers/*" element={<Customers />} />
9      </Routes>
10    </BrowserRouter>
11  );
12}
13
14function Customers() {
15  return (
16    <div>
17      <nav>
18        <Link to="/1">Customer 1</Link>
19      </nav>
20
21      <Routes>
22        <Route path="/" element={<CustomersList />} />
23        <Route path=":id" element={<Customer />} />
24      </Routes>
25    </div>
26  );
27}

اگر ری‌اکت روتر نسخه قبل را داشته باشید، بی‌درنگ متوجه خواهید شد که دیگر نیازی به استفاده از prop به نام exact نداریم همچنین متوجه می‌شوید آن Link که تعریف کرده‌ایم، نسبی (Relative) است. یعنی به جای ارسال /customers/:id صرفاً از /:id استفاده کرده‌ایم.

مسیرهای مبتنی بر شیء

اکنون می‌توانیم مسیرها را با استفاده از قلاب جدید useRouter تعریف کنیم. این امر به ما امکان می‌دهد که مسیرهای خود را با استفاده از اشیای جاوا اسکریپت تعریف کنیم. در ادامه نگاهی به مثال قبلی خود می‌اندازیم که این بار با استفاده از useRouter نوشته شده است:

1import {
2  BrowserRouter,
3  Link,
4  Outlet,
5  useRoutes
6} from 'react-router-dom';
7
8function App() {
9  let element = useRoutes([
10    { path: '/', element: <Home /> },
11    {
12      path: 'customers',
13      element: <Customers />,
14      children: [
15        { path: '/', element: <CustomersIndex /> },
16        { path: ':id', element: <CustomerProfile /> },
17      ]
18    }
19  ]);
20
21  return element;
22}
23
24function Users() {
25  return (
26    <div>
27      <nav>
28        <Link to="/1">Customer 1</Link>
29      </nav>
30
31      <Outlet />
32    </div>
33  );
34}

ممکن است از خود بپرسید که اهمیت این موضوع در چیست؟ چرا باید مسیرها را به جای JSX با استفاده از اشیای جاوا اسکریپت تشکیل بدهیم؟ یک کاربرد عالی این امر می‌تواند در زمان ساخت برنامه‌نویسی‌شده مسیرها باشد. فرض کنید می‌خواهید مسیرها را بر مبنای ساختار دایرکتوری اپلیکیشن خود ایجاد کنید. به این ترتیب می‌توانید همه فایل‌های موجود در دایرکتوری pages را شمارش کرده و مسیرها را بر مبنای آن بسازید.

کاهش اندازه باندل

تیم مسئول توسعه ری‌اکت روتر ادعا می‌کند که نسخه جدید بسیار کوچک‌‌تر از نسخه‌های قبلی است. آن‌ها تخمین می‌زنند که این کاهش در حدود 70% باشد. باندل‌های با حجم کمتر به این معنا است که اپلیکیشن سریع‌تر بارگذاری می‌شود و محتوا سریع‌تر به دست کاربران خواهد رسید.

ناوبری آماده تعلیق

قلاب قدیمی useHistory در نسخه 6 حذف شده و با یک API ناوبری آماده تعلیق جایگزین شده است. اکنون می‌توانید از useNavigate برای ناوبری برنامه‌نویسی‌شده به بخش‌های مختلف اپلیکیشن استفاده کنید. همچنین یک کامپوننت Navigate نیز عرضه شده است که می‌توانید برای ریدایرکت کاربران مورد استفاده قرار دهید.

1import { Navigate, useNavigate } from 'react-router-dom';
2
3function Redirect() {
4  return <Navigate to="/home" replace />;
5}
6
7function GoHomeButton() {
8  let navigate = useNavigate();
9  function handleClick() {
10    navigate('/home')
11  }
12  return (
13    <div>
14      <button onClick={handleClick}>Go to home page</button>
15    </div>
16  );
17}

سخن پایانی

به این ترتیب به پایان این مقاله با موضوع معرفی تازه‌های ری‌اکت روتر 6 می‌رسیم. چنان که دیدیم این نسخه جدید مزیت‌های زیادی دارد و شما می‌توانید از مواردی از قبیل کاهش اندازه باندل و ناوبری آماده تعلیق بهره بگیرید. بنابراین قویاً توصیه می‌کنیم که کتابخانه روتر خود را به جدیدترین نسخه ارتقا بدهید. فعلاً نسخه بتا را بیازمایید تا با آن بیشتر آشنا شوید.