리액트는 SPA 방식으로 라우팅을 구현한다.
React-Router-Dom은 리액트의 라우팅 관련 라이브러리로 현재 v6까지 발표되었다.
이전 버전인 v5와 v6는 문법적으로 차이가 있다. v6의 문법과 함께 v5에서 어떻게 바뀌었는지 정리해보겠다.
React-Router-Dom 버전6 설치
npm install react-router-dom@6
<BrowserRouter>
는 페이지를 새로 불러오지 않고도 주소를 변경하고 해당 주소의 경로에 관련된 정보를 리액트 컴포넌트에서 사용할 수 있도록 해준다.
BrowserRouter는 가장 최상단에서 모든 컴포넌트를 감싼다.
<Routes>
는 여러 Route중에서 경로가 일치하는 하나의 Route를 찾아 렌더링 시킨다.
Routes는 BrowserRouter 안에서 여러 Route를 감싼다.
💡 v5에서는 Switch
를 사용하다가 v6부터 Routes
로 변경되었다.
<Route>
는 경로에 따른 각각의 컴포넌트를 보여준다.
<PrivateRoute>
는 특정 조건이 충족되지 않았을 때 다른 페이지로 이동시킨다.
path
속성에는 경로를 넣고, element
속성에는 해당 경로에 접속했을 시 보여줄 컨포넌트를 넣는다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *
을 사용하면 된다. 해당되는 경로가 없어서 NotFound를 렌더링하고 싶은 경우 맨 마지막 라우트에 path="*"
을 사용하면 된다.
<Route path="주소" element={<컴포넌트 />} />
// 사용하는 컴포넌트를 react-router-dom으로 부터 모두 import
import { BrowserRouter, Routes, Route } from 'react-router-dom';
<BrowserRouter>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/detail" element={<Detail />} />
// /의 경우 우 모든 path에 매칭되므로 가장 아래로 내려서 작성
<Route path="/" element={<Home />} />
// 위에서부터 일치하는 경로를 찾고 없다면 NotFound 컴포넌트 렌더링
// 위 라우트에 지정된 경로 외에 접속하는 모든 경로에 해당
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
💡 v5에서는 정확하게 일치하는 경로를 찾기 위해 exact
옵션을 사용하였는 데 v6에서부터 삭제되었다.
v5에서는 컴포넌트를 지정할 때 component
속성을 사용하거나 render
를 사용하였는 데 v6부턴 element
로 변경되었다. 또한, 중첩라우팅이 가능하다.
v5에서는 NotFound 리다이렉트시 <Redirect>
를 사용하였는 데 v6부턴 path="*"
를 사용한다.
<Link>
는 리로드 없이 다른 페이지로 이동시키며 a 태그와 비슷한 역할을 한다.
a 태그는 페이지를 새로 불러오기 때문에 페이지를 새로 불러오는 것을 막고 주소의 경로만 바꾸는 Link 사용하는 것이다.
<NavLink>
는 스타일이 추가되는 등의 기능이 있다.
to
속성에 이동할 경로를 넣어주면 리로드 없이 페이지를 이동한다.
<Link to="경로">경로명</Link>
import { Link } from 'react-router-dom';
<Link to="/">Home</Link>
<Link to="/detail">Detail</Link>
useParams
는 URL 파라미터의 값을 가져온다.
URL 파라미터는 :id
형태로 경로에 유동적인 값을 넣는다.
<Route path="/endpoint/:id" />
useNavigate
는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 해준다.
useNavigate를 통해 navigate 함수를 가져와 변수에 담아 사용한다.
첫 번째 인자로는 경로, 두 번째 인자로는 { replace, state } 인수를 사용한다.
replace의 default값은 false이며 뒤로가기가 가능하다는 의미이다.
replace: true를 사용하면, 경로 적힌 주소로 이동한 후에 뒤로가기를 하더라도 현재 페이지로 돌아오지 않고 메인 페이지('/')로 넘어간다.
const navigate = useNavigate();
navigate('경로', replace);
💡 v5에서는 useHistory
를 사용하다가 v6부터 useNavigate
로 변경되었다.
✔️ path 지정
import { BrowserRouter, Routes, Route } from 'react-router-dom';
<BrowserRouter>
<Routes>
<Route path="/propduct/:id" element={<Product />} />
</Routes>
</BrowserRouter>
✔️ url에 넣어줄 정보 설정
import { useNavigate } from 'react-router-dom';
...
const nav = useNavigate();
...
const handleClick = () => {
nav(`/propduct/${product.id}`);
};
✔️ URL에 담긴 URL 파라미터값 가져오기
import { useParams } from 'react-router-dom';
...
const params = useParams();
// value값 가져오기
const id = params.id;
...
useLocation
은 location 객체를 반환하며, location객체의 search값을 참고하여 queryString을 가져올 수 있다.
queryString은 ?key=value
형태로 경로에 유동적인 값을 넣는다. 여러 개의 queryString을 연결할 때는 &
을 사용한다.
ex) /product?page=1&id=3
hash
: 주소의 해시문자(#) 뒤의 값pathname
: 현재 경로search
: ?를 포함한 쿼리 스트링state
: 페이지로 이동시 임의로 넣을 수 있는 상태 값key
: location 객체의 고유 값URLSearchParams
에 location.search를 인자로 넘기면, 해당 객체의 get메소드를 사용하여 queryString의 key, value 쌍을 얻을 수 있다.
✔️ path 지정
import { BrowserRouter, Routes, Route } from 'react-router-dom';
<BrowserRouter>
<Routes>
<Route path="/product" element={<Product />} />
</Routes>
</BrowserRouter>
✔️ url에 넣어줄 정보 설정
import { useNavigate } from 'react-router-dom';
...
const nav = useNavigate();
...
const handleClick = () => {
nav(`/propduct?id={data.id}`);
};
✔️ URL에 담긴 queryString값 가져오기
import { useLocation } from "react-router-dom";
...
const location = useLocation();
const search = URLSearchParams(location.search);
// location.search = propduct?id=value
...
// key값에 해당하는 value값 가져올 때는 get
{search.get("id")}
...
참고
📑 React-Router-Dom(v6)
📑 [React] 6. React Router (리액트 라우터) 사용하기