중첩 라우팅 소개

import React from 'react';
import { NavLink, Outlet } from 'react-router-dom'; // Outlet 임포트

function DashboardLayout() {
  const navLinkStyle = ({ isActive }) => ({
    display: 'block',
    padding: '10px 15px',
    margin: '5px 0',
    backgroundColor: isActive ? '#e0e0e0' : 'transparent',
    color: isActive ? '#333' : '#666',
    textDecoration: 'none',
    borderRadius: '5px',
    transition: 'background-color 0.2s',
  });

  return (
    <div style={{ display: 'flex', minHeight: 'calc(100vh - 100px)', border: '1px solid #ddd', borderRadius: '8px', overflow: 'hidden' }}>
      {/* 사이드바 */}
      <nav style={{
        width: '200px',
        backgroundColor: '#f4f4f4',
        padding: '20px',
        boxShadow: '2px 0 5px rgba(0,0,0,0.05)',
      }}>
        <h3 style={{ color: '#555', marginBottom: '20px' }}>대시보드 메뉴</h3>
        <ul style={{ listStyle: 'none', padding: 0 }}>
          <li>
            {/* to="overview"는 부모 경로인 /dashboard에 상대적임 -> /dashboard/overview */}
            <NavLink to="overview" style={navLinkStyle}>개요</NavLink>
          </li>
          <li>
            <NavLink to="settings" style={navLinkStyle}>설정</NavLink>
          </li>
          <li>
            <NavLink to="analytics" style={navLinkStyle}>분석</NavLink>
          </li>
          <li>
            {/* 절대 경로로도 지정 가능 */}
            <NavLink to="/contact" style={navLinkStyle}>문의하기 (외부)</NavLink>
          </li>
        </ul>
      </nav>

      {/* 메인 콘텐츠 영역 - 자식 라우트가 여기에 렌더링됩니다. */}
      <main style={{ flexGrow: 1, padding: '20px', backgroundColor: '#fff' }}>
        <h2 style={{ color: '#333', marginBottom: '20px' }}>대시보드 콘텐츠</h2>
        <Outlet /> {/* <-- 여기가 중요! 자식 라우트 컴포넌트가 이 위치에 렌더링됨 */}
      </main>
    </div>
  );
}

export default DashboardLayout;

import React from 'react';

function DashboardOverview() {
  return (
    <div style={{ border: '1px solid #e0e0e0', padding: '20px', borderRadius: '8px', backgroundColor: '#eaf7e7' }}>
      <h3 style={{ color: '#28a745' }}>개요 페이지</h3>
      <p style={{ color: '#555' }}>
        여기는 대시보드의 개요를 보여주는 콘텐츠입니다. 주요 지표와 요약 정보가 표시됩니다.
      </p>
    </div>
  );
}

export default DashboardOverview;

import React from 'react';

function DashboardSettings() {
  return (
    <div style={{ border: '1px solid #e0e0e0', padding: '20px', borderRadius: '8px', backgroundColor: '#e7f5ff' }}>
      <h3 style={{ color: '#007bff' }}>설정 페이지</h3>
      <p style={{ color: '#555' }}>
        사용자 프로필, 알림 설정 등 대시보드 관련 설정을 여기서 변경할 수 있습니다.
      </p>
    </div>
  );
}

export default DashboardSettings;

import React from 'react';

function DashboardAnalytics() {
  return (
    <div style={{ border: '1px solid #e0e0e0', padding: '20px', borderRadius: '8px', backgroundColor: '#fff3e0' }}>
      <h3 style={{ color: '#ff9800' }}>분석 페이지</h3>
      <p style={{ color: '#555' }}>
        데이터 분석 및 통계 자료가 그래프와 차트 형태로 시각화되어 표시됩니다.
      </p>
    </div>
  );
}

export default DashboardAnalytics;

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar'; // 기존 Navbar
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import ProductList from './pages/ProductList';
import ProductDetail from './pages/ProductDetail';

// 대시보드 관련 컴포넌트 임포트
import DashboardLayout from './pages/DashboardLayout'; // 부모 레이아웃
import DashboardOverview from './pages/DashboardOverview'; // 자식 컴포넌트
import DashboardSettings from './pages/DashboardSettings';
import DashboardAnalytics from './pages/DashboardAnalytics';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Navbar />

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/products" element={<ProductList />} />
          <Route path="/product/:id" element={<ProductDetail />} />

          {/* 중첩 라우트 정의 */}
          {/* 부모 라우트: /dashboard */}
          <Route path="/dashboard" element={<DashboardLayout />}>
            {/* 자식 라우트 */}
            {/* index: 부모 경로(/dashboard)로 접속했을 때 기본으로 렌더링될 자식 */}
            <Route index element={<DashboardOverview />} />
            {/* path="overview": 최종 경로는 /dashboard/overview */}
            <Route path="overview" element={<DashboardOverview />} />
            {/* path="settings": 최종 경로는 /dashboard/settings */}
            <Route path="settings" element={<DashboardSettings />} />
            {/* path="analytics": 최종 경로는 /dashboard/analytics */}
            <Route path="analytics" element={<DashboardAnalytics />} />
          </Route>

          {/* 일치하는 경로가 없을 때 렌더링될 컴포넌트 (404 Not Found) */}
          <Route path="*" element={
            <div style={{ textAlign: 'center', padding: '50px', color: '#888' }}>
              <h2>404 Not Found</h2>
              <p>페이지를 찾을 수 없습니다.</p>
            </div>
          } />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;