언어·프레임워크/React.js
[React.js] React Router 적용
DandyNow
2024. 2. 6. 17:57
728x90
반응형
1. React Router 설치
npm i react-router
2. 프로젝트에 적용
1. BrowserRouter 컴포넌트 적용
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router";
import App from "./app";
const root = document.getElementById("root");
ReactDOM.createRoot(root).render(
<BrowserRouter>
<App />
</BrowserRouter>
);
2. , 컴포넌트 적용
// app.js
// (생략)
import { Link, Route, Routes, useLocation } from "react-router";
import PageA from "./PageA"; // 이동할 페이지 컴포넌트
import PageB from "./PageB"; // 이동할 페이지 컴포넌트
import Home from "./Home"; // 이동할 페이지 컴포넌트
export default function App() {
const { pathname } = useLocation(); // pathname으로 현재 경로 정보 확인
// <Routes> 컴포넌트는 해당되는 Route를 렌더링함
// <Route> 컴포넌트의 path 속성에 경로, element 속성에 렌더링할 컴포넌트 작성함
return (
<div className="App">
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/page1">Page 1</Link>
</li>
<li>
<Link to="/page2">Page 2</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/page1" element={<PageA />} />
<Route path="/page2" element={<PageB />} />
</Routes>
</div>
);
}
😉 useLocation()의 pathname을 이용해 현재 경로 정보를 이용할 수 있다.
3. a태그 대신 Link 컴포넌트 사용
// PageA.js
import React from "react";
import { Link } from "react-router-dom";
const PageA = () => {
return (
<div>
<h1>PageA</h1>
<Link to="/">Home</Link>
</div>
);
};
export default PageA;
2025-04-25 추가
공식문서의 DECLARATIVE MODE(https://reactrouter.com/start/declarative/installation)를 참고하면 최신 사용법을 확인할 수 있다.
728x90
반응형