경로를 의미하는 Route와 진행을 뜻하는 ing가 합쳐진 단어로, 경로를 지정하는 과정이라는 뜻이다.
URL 요청 경로에 맞게 적절한 페이지를 보여주는 과정이다.
예를 들어 도메인 주소가 winterlood.com인 웹 서비스에서 winterlood.com/blog URL로 페이지를 요청하는 모습은 다음과 같다.
이때 요청 URL에서 도메인 주소 winterlood.com/ 뒤에 붙는 blog나 books를 '경로(path)'라고 한다.
npm i react-router-dom
설치가 끝나고 package.json 파일에서 확인해보면 다음과 같이 라우터가 제대로 설치 되었음을 알 수 있다.
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
라우터를 구현할 파일을 생성해준다.
react-router-dom 라이브러리에서 Routes와 Route 컴포넌트를 불러온다.
Routes 태그로 감싼 내부에 현해 URL 경로에 맞게 적절한 Route 컴포넌트를 페이지에 렌더링한다.
import "./App.css";
import { getEmotionImgById } from "./util.js";
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import Edit from "./pages/Edit";
import { Route, Routes } from "react-router-dom";
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
<Route path="/diary" element={<Diary />} />
<Route path="/edit" element={<Edit />} />
</Routes>
</div>
);
}
export default App;
결과를 확인에 보면 다음과 같이 적절한 경로에 내용이 화면에 렌더링 되었음을 알 수 있다.
<Link to = '이동할 경로'>링크 이름</Link>
다음과 같이 react-router-dom 라이브러리에서 Link 컴포넌트를 import 해준 뒤에 사용하면 된다.
import "./App.css";
import { getEmotionImgById } from "./util.js";
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import Edit from "./pages/Edit";
import { Link, Route, Routes } from "react-router-dom";
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
<Route path="/diary" element={<Diary />} />
<Route path="/edit" element={<Edit />} />
</Routes>
<div>
<Link to={"/"}>Home</Link>
<Link to={"/new"}>New</Link>
<Link to={"/diary"}>Diary</Link>
<Link to={"/edit"}>Edit</Link>
</div>
</div>
);
}
export default App;
Home에서 이동하고자 하는 링크를 클릭하면 해당 페이지로 이동된다.
(다음은 New링크를 클릭했을 경우)
동적 경로란 특정 아이템을 나타내는 id처럼 값이 변하는 요소를 URL에 포함하는 경우를 말한다.
https://localhost:3000/diary/{id}
//id가 3일 경우
https://localhost:3000/diary/3
https://localhost:3000?sort=latest
//값이 2개 이상일 경우
https://localhost:3000?sort=lates&page=1
<Route path="/diary/:id" element={<Diary />} />
id 자리에 임의의 숫자를 삽입했을 때 Diary 페이지가 렌더링 되었음을 확인했다.
import { useParams } from "react-router-dom";
const Diary = () => {
const { id } = useParams();
return (
<div>
<div>{id}번 일기</div>
<div>Diary 페이지입니다</div>
</div>
);
};
export default Diary;
URL의 경로에 따라서 id 값이 달라지는 것을 확인했다.
쿼리 스트링은 URL 경로 다음에 ?로 구분하므로 URL 파라미터처럼 페이지 라우팅을 위한 별도의 설정이 필요 없다.
import { useSearchParams } from "react-router-dom";
const Home = () => {
const [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams.get("sort"));
return <div className="Home">Home 페이지입니다.</div>;
};
export default Home;
localhost:3000?sort=apple로 접속해 쿼리 스트링으로 설정한 sort 값을 잘 불러 오는지 콘솔에서 확인한다.
만약 sort가 아닌 다른 값으로 접속한다면 null값이 들어간다.