티스토리 뷰

IT공부/프로그래밍

React Route

chmod755 2025. 2. 6. 06:52
반응형

1. React Router 설치

React Router는 리액트에서 페이지 이동을 쉽게 할 수 있도록 도와주는 라이브러리입니다.

npm install react-router-dom

2. React Router 설정

App.js에서 라우터를 설정해줘야 합니다.

import { BrowserRouter as Router, Routes, Route, useNavigate } from "react-router-dom";

// 페이지 컴포넌트
function HomePage() {
  return <h1>홈 페이지</h1>;
}

function AboutPage() {
  return <h1>소개 페이지</h1>;
}

// 버튼 컴포넌트 (클릭 시 페이지 이동)
export function MyButton() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate("/about")}>소개 페이지로 이동</button>
  );
}

// 앱 전체 구성
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<><HomePage /><MyButton /></>} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 주요 개념

  1. useNavigate() 훅 사용
    • useNavigate를 사용하면 페이지 이동이 가능합니다.
    • navigate("/about")을 실행하면 /about 페이지로 이동합니다.
  2. React Router의 기본 구성
    • <Routes> 안에 <Route>를 설정하여 URL에 따라 다른 페이지를 보여줍니다.
    • <BrowserRouter>는 전체 애플리케이션을 감싸야 합니다.

4. 실행 결과

✅ 버튼을 클릭하면 /about 페이지로 이동하게 됩니다.
✅ 다시 /로 가고 싶다면 <button onClick={() => navigate("/")}>홈으로</button>을 추가하면 됩니다.

 

본 글은 ChatGPT에서 제공한 내용을 바탕으로 정리한 글입니다.

반응형

'IT공부 > 프로그래밍' 카테고리의 다른 글

react import VS import {} 차이점  (0) 2025.02.09
React 복잡한 Route(라우트) 관리 방법  (0) 2025.02.06
React 기초  (1) 2025.02.05
m3 macbook python pip install 에러  (0) 2024.07.21
한국은행 API 신청 방법  (0) 2024.07.21
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함