티스토리 뷰
반응형
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. 주요 개념
- useNavigate() 훅 사용
- useNavigate를 사용하면 페이지 이동이 가능합니다.
- navigate("/about")을 실행하면 /about 페이지로 이동합니다.
- 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
링크
TAG
- 일본어학습법
- 일본어존경어
- WSL2
- 인프라엔지니어
- 인프라
- 일본어경어
- 네트워크공부
- 일본어면접
- 인프라공부
- 일본어
- 일본생활
- 리액트
- 일본
- React
- 네트워크
- 일본취업
- 엔트리시트
- WSL
- Es
- 이력서
- 해외취업
- 일본IT기업
- 일본어공부
- it
- Network
- 리액트 문법
- OSI 7 layer
- WSL설치
- 면접
- 일본어학습
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함