React Router v6의 특정 경로에서 NavBar 및 SideBar를 제외하는 방법은 무엇입니까?

React Router v6에서 다양한 레이아웃으로 구성 요소 렌더링

React Router v6을 사용하면 다양한 레이아웃과 요소로 구성 요소를 렌더링할 수 있습니다. 특정 경로, 즉 로그인 페이지(LoginPage)에서 내비게이션 바(NavBar) 및 사이드바(SideBar)를 제외하는 특정 문제를 해결해 보겠습니다.

기본적으로 React Router는 기본적으로 NavBar 및 SideBar와 같은 구성 요소를 포함한 동일한 레이아웃. 이 동작을 재정의하려면 원하는 요소를 포함하고 중첩 경로에 대한 출구를 제공하는 별도의 레이아웃 구성 요소를 도입하세요.

중첩 경로 사용

NavBar 및 SideBar를 캡슐화하는 레이아웃 구성 요소 AppLayout을 만듭니다. .

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

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles["main--container"]}>
      <div className={styles["main--content"]}>
        <Outlet /> {/* Outlet for nested routes */}
      </div>
    </main>
  </>
);

이 기능을 사용하려면 앱 구성 요소를 수정하세요. 레이아웃:

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

이 접근 방식은 NavBar 및 SideBar 없이 LoginPage를 렌더링하고 이를 AppLayout 내에 중첩된 대시보드 경로에 포함합니다.

경로 구성 및 useRoutes 후크 사용

대안 방법은 경로 구성 객체를 정의하고 useRoutes 후크를 활용하는 것입니다. 방법은 다음과 같습니다.

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;
};

이 접근 방식은 경로 구성에 따라 경로를 동적으로 렌더링합니다.

경로 구성 및 데이터 라우터 사용(v6.4.0에서 도입됨)

React Router v6.4.0을 사용하면 데이터 라우터를 사용하여 동일한 결과를 얻을 수 있습니다. 결과:

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

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

const router = createBrowserRouter(routesConfig);

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

이 접근 방식에는 createBrowserRouter 인스턴스를 생성하고 RouterProvider를 사용하여 경로를 렌더링하는 작업이 포함됩니다.

위 내용은 React Router v6의 특정 경로에서 NavBar 및 SideBar를 제외하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!