React Router 사용법

npm install react-router-dom
# 또는
yarn add react-router-dom

import React from 'react';

function Home() {
  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2 style={{ color: '#2ecc71' }}>환영합니다!</h2>
      <p style={{ fontSize: '1.1em', color: '#555' }}>
        이곳은 홈페이지입니다. 다양한 기능을 탐색해 보세요.
      </p>

    </div>
  );
}

export default Home;

import React from 'react';

function About() {
  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2 style={{ color: '#3498db' }}>회사 소개</h2>
      <p style={{ fontSize: '1.1em', color: '#555' }}>
        저희 회사에 대해 더 자세히 알아보세요.
      </p>

    </div>
  );
}

export default About;

import React from 'react';
import { useNavigate } from 'react-router-dom'; // useNavigate 훅 임포트

function Contact() {
  const navigate = useNavigate(); // useNavigate 훅 사용

  const goToHome = () => {
    navigate('/'); // '/' 경로로 이동
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2 style={{ color: '#e74c3c' }}>문의하기</h2>
      <p style={{ fontSize: '1.1em', color: '#555' }}>
        문의 사항은 프로젝트에서 안내한 공식 채널을 통해 접수할 수 있습니다.
      </p>

      <button
        onClick={goToHome}
        style={{
          marginTop: '30px',
          padding: '10px 20px',
          backgroundColor: '#e74c3c',
          color: 'white',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer',
          fontSize: '1em'
        }}
      >
        홈으로 돌아가기
      </button>
    </div>
  );
}

export default Contact;

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

function Navbar() {
  const navLinkStyle = ({ isActive }) => {
    return {
      fontWeight: isActive ? 'bold' : 'normal',
      color: isActive ? '#007bff' : '#333',
      textDecoration: 'none',
      padding: '10px 15px',
      margin: '0 10px',
      borderRadius: '5px',
      transition: 'all 0.3s ease',
      backgroundColor: isActive ? '#e7f5ff' : 'transparent',
    };
  };

  return (
    <nav style={{
      backgroundColor: '#f8f9fa',
      padding: '15px 0',
      boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
      display: 'flex',
      justifyContent: 'center',
      gap: '20px'
    }}>
      <NavLink to="/" style={navLinkStyle}>Home</NavLink>
      <NavLink to="/about" style={navLinkStyle}>About</NavLink>
      <NavLink to="/contact" style={navLinkStyle}>Contact</NavLink>
      <NavLink to="/product/123" style={navLinkStyle}>Product (예시)</NavLink> {/* 동적 라우팅을 위한 예시 */}
    </nav>
  );
}

export default Navbar;

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 ProductDetail from './pages/ProductDetail'; // 다음 예제를 위한 컴포넌트

function App() {
  return (
    // 최상위에 BrowserRouter로 감싸줍니다.
    <BrowserRouter>
      <div className="App">
        <Navbar /> {/* 내비게이션 바는 모든 페이지에서 보입니다. */}

        {/* Routes 컴포넌트 안에 모든 Route들을 정의합니다. */}
        <Routes>
          {/* path="/" 경로에 Home 컴포넌트 렌더링 */}
          <Route path="/" element={<Home />} />
          {/* path="/about" 경로에 About 컴포넌트 렌더링 */}
          <Route path="/about" element={<About />} />
          {/* path="/contact" 경로에 Contact 컴포넌트 렌더링 */}
          <Route path="/contact" element={<Contact />} />
          {/* 동적 파라미터를 갖는 경로: :id 부분은 동적으로 변할 수 있습니다. */}
          <Route path="/product/:id" element={<ProductDetail />} />
          {/* 일치하는 경로가 없을 때 렌더링될 컴포넌트 (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;

import React from 'react';
import { useParams } from 'react-router-dom'; // useParams 훅 임포트

function ProductDetail() {
  const { id } = useParams(); // URL 파라미터에서 'id' 값 추출

  // 실제 앱에서는 이 id를 사용하여 서버에서 제품 데이터를 가져올 것입니다.
  const productData = {
    '123': { name: 'React 신발', price: 99000, description: 'React 개발자를 위한 특별한 신발입니다.' },
    '456': { name: '리액트 후드티', price: 45000, description: '깔끔한 리액트 로고가 새겨진 후드티입니다.' }
  };

  const product = productData[id]; // 가상 데이터에서 id에 해당하는 제품 찾기

  if (!product) {
    return (
      <div style={{ padding: '20px', textAlign: 'center', color: '#888' }}>
        <h2>제품을 찾을 수 없습니다.</h2>
        <p>ID: {id}</p>
      </div>
    );
  }

  return (
    <div style={{ padding: '20px', textAlign: 'center', border: '1px solid #ddd', borderRadius: '8px', margin: '20px', backgroundColor: '#f9f9f9' }}>
      <h2 style={{ color: '#007bff' }}>{product.name} 상세 페이지</h2>

      <p style={{ fontSize: '1.2em', color: '#333', fontWeight: 'bold' }}>
        가격: {product.price.toLocaleString()}원
      </p>
      <p style={{ fontSize: '1.1em', color: '#555' }}>
        {product.description}
      </p>
      <p style={{ fontSize: '0.9em', color: '#777' }}>
        현재 보고 있는 제품 ID: <span style={{ fontWeight: 'bold', color: '#007bff' }}>{id}</span>
      </p>
    </div>
  );
}

export default ProductDetail;