React로 블로그 만들기 - 라우팅 구성하기(2)

React Router 설치

npm install react-router-dom

 

라우팅 설정 파일 만들기

src/routes/Router.jsx

// src/routes/Router.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from '../components/Header';
import HomePage from '../pages/HomePage';
import WritePage from '../pages/WritePage';
import PostPage from '../pages/PostPage';

function Router() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/write" element={<WritePage />} />
        <Route path="/post/:id" element={<PostPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

-> Router 페이지에 <Header /> 가 추가된다.

-> 추후 공통 레이아웃 페이지를 적용시 Router 파일에 추가해야 한다.

 

메뉴 네비게이션 추가

// src/components/Header.jsx
import { Link } from 'react-router-dom';

function Header() {
  return (
    <header>
      <nav>
        <Link to="/">홈</Link> | <Link to="/write">글쓰기</Link>
      </nav>
    </header>
  );
}

export default Header;

 

각 페이지 생성하기

 

src/pages/HomePage.jsx

// src/pages/HomePage.jsx
function HomePage() {
  return <h2>홈 - 글 목록</h2>;
}

export default HomePage;

 

src/pages/WritePage.jsx

// src/pages/WritePage.jsx
function WritePage() {
  return <h2>글 작성 페이지</h2>;
}

export default WritePage;

 

src/pages/PostPage.jsx

import { useParams } from 'react-router-dom';

function PostPage() {
  const { id } = useParams();
  return <h2>글 상세 페이지 - ID: {id}</h2>;
}

export default PostPage;

 

App.jsx에서 Router 적용시키기

// src/App.jsx
import Router from './routes/Router';

function App() {
  return <Router />;
}

export default App;

 

실행하기

npm run dev