React Router: React 앱에서 페이지 이동을 가능하게 해주는 라이브러리
React 자체는 "SPA(Single Page Application)"라서, 기본적으로 페이지 이동이 안 된다.
그래서 React Router가 필요하고 이를 통해 URL에 따라 다른 컴포넌트를 보여줄 수 있다!
ex) 사용법
홈 페이지, 소개 페이지, 연락처 페이지로 이동하는 React 앱을 만든다고 한다면..
/ -> 홈페이지
/about -> 소개 페이지
/contact -> 연락처 페이지
<Route path = "/" element = {<Home />} />
<Route path ="/about" element = {<About />} />
<Route path ="/contact" element = {<Contact />} />
- App.jsx
import {BrowserRouter, Routes, Route} from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
function App(){
return (
<BrowserRouter>
<div>
<h1> My website </h1>
<Routes>
<Route path = "/" element = {<Home />} />
<Route path ="/about" element = {<About />} />
<Route path ="/contact" element = {<Contact />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
-Home.jsx
export default function Home() {
return <h2> Homepage </h2>
}
-About.jsx
export default function About(){
return <h2> Introduction Page </h2>; }
-Contact.jsx
export default function Contact(){
return <h2> Contact Page </h2> ; }