React Router v6을 사용하여 사용자 정의 레이아웃으로 React 구성요소를 어떻게 렌더링할 수 있나요?

React Router v6을 사용하여 사용자 정의 레이아웃으로 구성 요소 렌더링

React에서 구성 요소를 사용하면 애플리케이션의 경로를 정의하고 현재 URL을 기반으로 렌더링되어야 하는 구성 요소를 지정할 수 있습니다. 탐색 요소 없이 사용자 정의 레이아웃이 필요한 로그인 페이지와 같이 다양한 유형의 페이지로 작업할 때 구성 요소의 레이아웃을 제어하는 ​​방법을 이해하는 것이 필요합니다.

React Router v6에는 " 중첩된 경로입니다." 이를 통해 다른 경로의 상위로 사용될 레이아웃 구성요소를 생성할 수 있습니다. 이 레이아웃 구성 요소에는 Navbar 및 Sidebar와 같은 공유 요소를 포함할 수 있습니다.

이를 구현하려면 Navbar 및 Sidebar를 포함하는 AppLayout 구성 요소를 생성할 수 있습니다. 그런 다음 앱 구성 요소에서 로그인 페이지를 제외한 모든 경로를 AppLayout으로 래핑합니다.

// AppLayout.js
import { Outlet } from 'react-router-dom';

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles['main--container']}>
      <div className={styles['main--content']}>
        <Outlet />
      </div>
    </main>
  </>
);

// App.js
import { Routes, Route } from 'react-router-dom';
import { AppLayout } from './AppLayout';
import LoginPage from './LoginPage';
import Dashboard from './Dashboard';

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

또는 useRoutes 후크 또는 동일한 결과를 얻기 위해 데이터 라우터(v6.4.0에 도입됨)가 있는 구성 요소를 사용합니다. 귀하가 선택하는 구체적인 방법은 귀하의 선호도와 신청 요건에 따라 달라집니다.

위 내용은 React Router v6을 사용하여 사용자 정의 레이아웃으로 React 구성요소를 어떻게 렌더링할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!