웹 어플리케이션에서 라우팅은 사용자가 요청한 URL에 따라 그에 해당하는 페이지를 보여주는것을 의미한다.
터미널에 해당 명령어를 입력하고 router를 설치한다
npm i react-router-dom
설치한 react 프로젝트 디렉토리를 열러 package.json 파일에 “dependencies”중 “react-router-dom”이 있는지 확인한다.
리엑트 라우터를 통해 여러 페이지로 구성된 웹을 만들기 위해 각 페이지에서 사용할 컴포넌트를 만든다.
src/pages/Home.js
const Home = () => {
return (
<div>
<h1>홈</h1>
<p>가장 먼저 보여지는 페이지입니다.</p>
</div>
);
};
export default Home;
src/pages/About.js
const About = () => {
return (
<div>
<h1>소개</h1>
<p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
</div>
);
};
export default About;
사용자가 설정한 주소 경로에 따라 원하는 컴포넌트를 보여주기 위해 Route
라는 컴포넌트를 통해 라우트 설정을 해준다.
Route
컴포넌트는 다음과 같이 사용한다.
<Route path="주소입력" element={<컴포넌트 명/>}/>
그리고, Route
컴포넌트는 Routes
컴포넌트 내부에 사용되어야 한다.
src/App.js
import { Route, Routes } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
const App = () => {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
);
};
기존 웹페이지에서 원래 링크를 보여줄때 a
태그를 사용하는데 React라우터를 사용하는 프로젝트에서 a
태그를 바로 사용하면 안된다. 왜냐하면 a
태그를 클릭하여 페이지를 이동할 때 브라우저는 페이지를 새로 불러오기 때문이다.
따라서 a
태그가 아닌 Link
컴포넌트를 사용해서 링크를 걸어준다
a태그가 아닌 Link컴포넌트를 사용하는 이유는 a태그의 기본 속성은 페이지를 이동시키면서 페이지를 아예 새로 불러오게 되면서 리액트 앱이 가지고있는 상태들 및 렌더링된 컴포넌트들이 사라지고 새로 랜더링되기 때문이다. 하지만 Link컴포넌트를 사용하게되면 브라우저의 주소만 바꿀 뿐, 페이지를 새로불러오지 않는다.