چگونه با استفاده از react-router-dom v6 می‌توانم Layout های مختلف را برای مسیرهای مختلف نمایش دهیم؟

mohsen•1 سال قبل
ارسال شده در
react

فرض کنید که می خواهیم صفحه ورود (Login) را بدون نمایش NavBar و SideBar به کاربر نمایش دهیم. برای مدیریت این مشکل در React Router نسخه 6، راه‌های متعددی وجود دارد که در ادامه به بررسی آن‌ها می‌پردازیم.

برای اینکه بتوانید NavBar و SideBar را فقط در برخی از صفحات خاص مثل داشبورد (Dashboard) نمایش دهید و در صفحه ورود آن‌ها را پنهان کنید، می‌توانید یک کامپوننت لی اوت (AppLayout) درست کنید و NavBar و SideBar را در آن قرار دهید و از Outlet برای نمایش روت‌های تو در تو استفاده کنید.

به کد زیر توجه کنید که این مفهوم را به وضوح نشان می‌دهد:

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

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles["main--container"]}>
      <div className={styles["main--content"]}>
        <Outlet /> // روت‌های تو در تو در اینجا رندر می‌شوند
      </div>
    </main>
  </>
);

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route element={<AppLayout />} >
          <Route path="/" element={<Dashboard />} />
        </Route>
      </Routes>
    </>
  );
};

در این مثال، زمانی که کاربر به /login می‌رود، فقط کامپوننت LoginPage رندر می‌شود. اما در هنگام رفتن به /، AppLayout با NavBar و SideBar رندر خواهد شد.

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

      const routesConfig = [
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Dashboard />,
      },
    ],
  },
];

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

const App = () => {
  const routes = useRoutes(routesConfig);

  return routes;
};

اگر در آینده نیاز به کار با RouterProvider دارید، می‌توانید از روش زیر استفاده کنید:

      import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter(routesConfig);

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

همچنین یک روش ساده‌تر برای پنهان‌سازی NavBar در صفحه ورود، استفاده از useLocation است. با گرفتن آدرس فعلی، می‌توانید تصمیم بگیرید که آیا NavBar باید رندر شود یا خیر:

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

const App = () => {
  const location = useLocation();

  return (
    <>
      {location.pathname === "/login" ? null : <NavBar />}
      <SideBar />
      <main className={styles["main--container"]}>
        <div className={styles["main--content"]}>
          <Routes>
            <Route path="/login" element={<LoginPage />} />
            <Route path="/" element={<Dashboard />} />
          </Routes>
        </div>
      </main>
    </>
  );
};

این روش به شما کمک می‌کند تا فقط در صورت نیاز NavBar را به نمایش بگذارید و در غیر این صورت آن را پنهان کنید. به این ترتیب می‌توانید ساختار روت‌های خود را به گونه‌ای مدیریت کنید که به بهترین نحو بر اساس نیازهای اپلیکیشن‌تان عمل کند.

رای
0
ارسال نظر
مرتب سازی:
اولین نفری باشید که نظر می دهید!