[React] 라우터(Router)와 레이아웃(Layout) 쪼개기

 

 

 

 

책+구글링으로 구현해봤던 레이아웃과 라우터 쪼개기!

이전에 만들어놨던거 기록기록...✍🏻

 

 

---

 

 

📄 index.tsx

<BrowserRouter>로 묶어준다.

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
)

 

 

📄 App.tsx

<CommonRouter> 컴포넌트를 만들고 작성한다.

import React from 'react'
import styles from './assets/scss/App.module.scss'
import GlobalStyles from './GlobalStyles'
import CommonRouter from './router/CommonRouter'

function App() {
  return (
    <section className={styles.app}>
      <GlobalStyles />
      
      // router가 있는 위치
      <CommonRouter />
    </section>
  )
}

export default App

 

 

📄 CommonRouter.tsx

import React from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'

// 레이아웃
import MainLayout from '../layout/MainLayout'
import SubLayout from '../layout/SubLayout'

// 페이지
import Home from '../pages/contents/Home'
import Best from '../pages/contents/Best'
import Content from '../pages/contents/Content'
import My from '../pages/contents/My'
import Detail from '../pages/common/Detail'
import CharacterInfo from '../pages/common/Character'

function CommonRouter() {
  return (
    <Routes>
      // <Route>의 element에 레이아웃을 넣어준다.
      <Route element={<MainLayout />}>
        <Route path="/" element={<Navigate replace to="/home" />}></Route>
        <Route path="/home" element={<Home />}></Route>
        <Route path="/best" element={<Best />}></Route>
        <Route path="/content" element={<Content />}></Route>
        <Route path="/my" element={<My />}></Route>
      </Route>
      <Route element={<SubLayout />}>
        <Route path="/detail/:id" element={<Detail />}></Route>
        <Route path="/character/:id" element={<CharacterInfo />}></Route>
      </Route>
      // TODO: 404 처리 필요
      {/*<Route component={NotFound} />*/}
    </Routes>
  )
}

export default CommonRouter

 

 

📄 MainLayout.tsx

<Outlet>을 사용하였다. Vue.js의 <slot> 같은 느낌으로 이해했다.

import React from 'react'
import Header from '../pages/common/Header'
import Footer from '../pages/common/Footer'
import { Outlet } from 'react-router-dom'

function MainLayout() {
  return (
    <>
      <Header isMain={true}></Header>
      <Outlet />
      <Footer></Footer>
    </>
  )
}

export default MainLayout

 

 

 

Main Layout

 

 

Sub Layout

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.