[LAB-5] 라우터 연결 문제 관련

문제 상황

홈 화면에는 헤더와 푸터가 불러와 지지 않게 하고 다른 페이지들은 헤더와 푸터가 불러와 지게 하고싶은데 라우터 구성을 어떻게 해야될지 감이 잡히지 않아서 질문 올립니다..!

문제 해결

레이아웃 컴포넌트에 BaseLayout을 추가합니다. 그리고 RootLayout 컴포넌트에서 헤더, 푸터를 제거합니다.

Layout.tsx

import { Footer, Header } from '@/components';
import { Outlet } from 'react-router-dom';

export default function RootLayout() {
  return (
    <>
      <Outlet />
    </>
  );
}

export function BaseLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
}

그리고 App 컴포넌트를 열어 라우트 구성을 아래와 같이 수정해보세요. 😃

App.tsx

import RootLayout, { BaseLayout } from './pages/Layout/Layout';

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    errorElement: <NotFound />,
    children: [
      { index: true, element: <Home /> },
      {
        path: 'mainPage',
        element: (
          <BaseLayout>
            <MainPage />
          </BaseLayout>
        ),
      },
      {
        path: 'recommend',
        element: (
          <BaseLayout>
            <Recommend />
          </BaseLayout>
        ),
      },
      {
        path: 'chat',
        element: (
          <BaseLayout>
            <Chat />
          </BaseLayout>
        ),
      },
      {
        path: 'myPage',
        element: (
          <BaseLayout>
            <MyPage />
          </BaseLayout>
        ),
      },
    ],
  },
]);

그러면 아래처럼 홈 페이지 이외의 나머지 페이지는 헤더와 푸터를 포함하게 됩니다.

Home

MainPage

yamoo9 / likelion-FEQA

[LAB-5] 라우터 연결 문제 관련 #188

질문 작성자

문제 상황

프로젝트 저장소 URL

환경 정보

문제 상황

문제 해결