🚀 آشنایی با ری اکت 19 و ری اکت روتر 7 ، ویژگیهای جدید

🚀 چگونه با دستور جدید npx create-react-router یک اپلیکیشن مدرن بسازیم؟

در نسخه جدید ری‌اکت ۱۹، ابزارهای جدیدی معرفی شده‌اند که توسعه اپلیکیشن‌های مدرن را ساده‌تر، سریع‌تر و ماژولارتر کرده‌اند. یکی از مهم‌ترین این ابزارها، نسخه جدید ری اکت روتر نسخه 7 است که حالا به‌صورت مستقیم توسط Shopify نگهداری می‌شود.

🔧 نصب سریع با یک دستور:

برای شروع یک پروژه ری‌اکت با معماری جدید، تنها کافی‌ست بنویسید:

npx create-react-router@latest

این دستور چه چیزی را برای شما آماده می‌کند؟

• تنظیمات کامل با Vite

• استفاده از React Router v7 برای مدیریت مسیرها

• پشتیبانی داخلی از loaders، actions، error boundaries

• قابلیت تنظیم مسیرها از طریق ساختار فایل‌ها

• آمادگی برای استفاده از SSR، SSG و RSC

📦 فایل root.tsx: جایگزین App.tsx

در این ساختار جدید، فایل root.tsx نقش همان App.tsx قدیمی را دارد ولی با قدرت و ساختار بهتر:

• شامل layout اصلی کل اپ است

• کامپوننت <Outlet /> برای نمایش مسیرهای تو در تو

• قابلیت استفاده از <ScrollRestoration />، ناوبری، یا contextهای کلی

• اتصال راحت‌تر به loaderهای سطح بالا یا خطاهای عمومی

مثالی از این فایل:

import { Outlet, ScrollRestoration } from "react-router-dom";

export function Root() {
  return (
    <>
      <Navbar />
      <Outlet />
      <ScrollRestoration />
    </>
  );
}

🗂️ مسیرها بر اساس ساختار فایل‌ها

در ساختار جدید، هر فایل در پوشه routes/ معادل یک صفحه است:

routes/
  ├─ index.tsx       → صفحه اصلی
  ├─ about.tsx       → درباره ما
  └─ blog/
      ├─ index.tsx   → لیست وبلاگ
      └─ $postId.tsx → نمایش هر پست

هر فایل می‌تواند شامل loader()، action() و ErrorBoundary مخصوص خودش باشد.

🌐 پشتیبانی از SSR، SSG و RSC

در این ساختار شما می‌توانید:

• صفحات ساکن را با SSG بسازید (مثل لندینگ)

• صفحات دینامیک را با SSR رندر کنید (مثل داشبورد)

• از React Server Components استفاده کنید (برای کاهش اندازه و بهینه‌سازی)

و مهم‌تر اینکه: این استراتژی‌ها را می‌توان به ازای هر مسیر جداگانه تعریف کرد.

⚠️ آیا باید از صفر شروع کنیم؟

در داکیومنت رسمی ری‌اکت آمده که:

«ساخت اپ از صفر، اغلب یعنی ساختن یک فریم‌ورک اختصاصی.»

اگر صرفاً برای یادگیری باشد، شروع از صفر مفید است؛ اما برای پروژه واقعی پیشنهاد می‌شود از ساختارهای آماده مثل همین create-react-router استفاده کنید که بسیاری از مشکلات را از پیش حل کرده‌اند.

✨ ری اکت 19 و ری اکت روتر نسخه 7 امکاناتی فراهم کرده‌اند که:

• راه‌اندازی اپ را ساده‌تر کنند

• بهترین شیوه‌های توسعه مدرن را به‌کار بگیرند

• پشتیبانی از SSR/SSG/RSC را از ابتدا ممکن کنند

• ساختار ماژولار با فایل‌های جداگانه برای هر صفحه داشته باشند

پیشنهاد می‌کنم اگر هنوز این روش را امتحان نکرده‌اید، همین حالا دست به کار شوید:

npx create-react-router@latest

آیا شما هم تجربه ای در استفاده از ری اکت روتر نسخه 7 هنگام راه اندازی اولیه پروژه دارید؟

برای دریافت مقالات بیشتر مرا در همینجا ویرگول دنبال کنید و یا در لینکدین مرا دنبال نمایید:

SeyedAhmadDv