معرفی Outlet در React Router: رندر کردن مسیرهای تو در تو

در این پست به بررسی کامپوننت Outlet در کتابخانه React Router خواهیم پرداخت. این کامپوننت یکی از اجزای مهم برای مدیریت مسیرهای تو در تو (Nested Routes) است. در پروژه‌های ری‌اکت که از React Router برای مسیریابی استفاده می‌کنند، گاهی نیاز به رندر کردن چند مسیر فرزند در دل یک مسیر والد داریم. اینجاست که کامپوننت Outlet به کمک می‌آید و نقش یک جایگاه (placeholder) را برای مسیرهای فرزند ایفا می‌کند.

در ادامه به توضیح و مثال‌هایی از نحوه استفاده از Outlet پرداخته می‌شود تا به شما کمک کند بهتر با این مفهوم آشنا شوید و آن را در پروژه‌های خود به کار بگیرید.

در React Router، کامپوننت `Outlet` به عنوان یک جایگاه (placeholder) برای رندر کردن کامپوننت‌های فرزند در داخل یک کامپوننت والد استفاده می‌شود. این مکانیزم معمولاً در زمان استفاده از مسیرهای تو در تو (nested routes) به کار می‌رود.

فرض کنید که شما یک مسیر والد دارید که خودش شامل چند مسیر فرزند است. در این حالت، `Outlet` در مسیر والد قرار می‌گیرد و زمانی که یکی از مسیرهای فرزند تطبیق داده می‌شود، محتوای آن مسیر فرزند در داخل `Outlet` رندر می‌شود.

import { Outlet } from 'react-router-dom';

function ParentLayout() {
  return (
    <div>
      <h1>صفحه والد</h1>
      {/* اینجا کامپوننت‌های فرزند رندر می‌شوند */}
      <Outlet />
    </div>
  );
}

سپس می‌توانید مسیرهای فرزند را تعریف کنید:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import ParentLayout from './ParentLayout';
import ChildComponent from './ChildComponent';

const router = createBrowserRouter([
  {
    path: &quot/parent&quot,
    element: <ParentLayout />,
    children: [
      {
        path: &quotchild&quot,
        element: <ChildComponent />,
      },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

در این مثال:

- وقتی کاربر به مسیر `/parent/child` می‌رود، کامپوننت `ChildComponent` داخل `Outlet` که در `ParentLayout` قرار دارد رندر می‌شود.

- اگر مسیری به `/parent` برود (بدون `/child`)، فقط کامپوننت والد (`ParentLayout`) نمایش داده می‌شود.

پس `Outlet` یک جایگاه است که مسیرهای فرزند در آن رندر می‌شوند.