React Router는 무엇인가요?
React Router는 React 애플리케이션에서 네비게이션을 위한 라이브러리입니다.
사용자가 브라우저를 새로고침하지 않고 페이지 간에 이동할 수 있도록 도와줍니다.
React Router를 설치하는 방법:
npm install react-router-dom
1. BrowserRouter
BrowserRouter은 라우팅을 위한 주요 래퍼입니다.
그것은 UI를 브라우저 URL과 동기화합니다.
예:
import {
BrowserRouter,
Routes,
Route,
Link
} from "react-router-dom";
function Home() {
return <h1>Home Page</h1>;
}
function About() {
return <h1>About Page</h1>;
}
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
export default App;
왜 BrowserRouter를 사용하나요?
BrowserRouter가 없으면 라우팅이 작동하지 않습니다.
그것은 다음을 가능하게 합니다:
URL 처리
이동
라우트 관리
2. 라우트와 라우트
Routes는 모든 라우트를 그룹화하는 데 사용됩니다.
Route는 특정 URL에 대해 어떤 컴포넌트를 로드해야 하는지 정의합니다.
예시:
import { Routes, Route } from "react-router-dom";
function Home() {
return <h1>Home Page</h1>;
}
function About() {
return <h1>About Page</h1>;
}
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
);
}
export default App;
설명
경로 로드된 컴포넌트
/ 홈
/about About
사용자가 /about을 방문하면 React는 About 컴포넌트를 표시합니다.
3. 링크
보통 HTML은 태그를 네비게션에 사용합니다.
하지만 React Router에서는 Link를 사용합니다.
왜일까요.
그 이유는 페이지를 새로고침하기 때문입니다.
Link는 새로고침 없이 페이지를 변경합니다.
예시:
import { Link } from "react-router-dom";
function Navbar() {
return (
<div>
<Link to="/">Home</Link>
<br />
<Link to="/about">About</Link>
</div>
);
}
export default Navbar;
출력
홈을 클릭하면 홈 페이지로 이동합니다
약관을 클릭하면 약관 페이지로 이동합니다
페이지 새로고침이 발생하지 않습니다
4. useNavigate Hook
useNavigate프로그래밍 방식의 이동에 사용됩니다
이는 자바스크립트 코드를 사용하여 이동이 발생한다는 의미입니다
예시:
로그인 후
폼 제출 후
사용자를 리디렉션합니다
예시:
import { useNavigate } from "react-router-dom";
function Login() {
const navigate = useNavigate();
function handleLogin() {
alert("Login Successful");
navigate("/home");
}
return (
<div>
<button onClick={handleLogin}>
Login
</button>
</div>
);
}
export default Login;
설명
버튼이 클릭되었을 때:
경고 메시지가 표시됩니다
사용자가 자동으로 /home으로 이동합니다
완전한 예시
import {
BrowserRouter,
Routes,
Route,
Link,
useNavigate
} from "react-router-dom";
function Home() {
return <h1>Home Page</h1>;
}
function About() {
return <h1>About Page</h1>;
}
function Login() {
const navigate = useNavigate();
function loginUser() {
navigate("/");
}
return (
<button onClick={loginUser}>
Go Home
</button>
);
}
function App() {
return (
<BrowserRouter>
<Link to="/">Home</Link>
<br />
<Link to="/about">About</Link>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/login" element={<Login />} />
</Routes>
</BrowserRouter>
);
}
export default App;
React Router의 장점
빠른 네비게이션
페이지 새로고침 없음
더 나은 사용자 경험
쉬운 라우팅 시스템
SPA에 잘 작동합니다