[Toy Project] React-Router-Dom V6으로 페이지 라우팅하기

인터넷 강의로 배울 때는 React-Router-Dom의 버전이 v5였는데, 내가 현재 실습을 할 때는 v6가 릴리즈 되었다.

따라서 강의의 내용을 그대로 따라하다가 오류에 직면했다.

 

참고 블로그)

react-router-dom v6 업데이트 후 달라진 점 (ft. Prompt 창 띄우는 법) :: 경아의 개발 블로그 (tistory.com)

react-router-dom v6 업데이트 후 달라진 점 (ft. Prompt 창 띄우는 법)

React Router v6 튜토리얼 (velog.io)

React Router v6 튜토리얼

기존 방식

기존에는 BrowserRouter를 바로 App.js에서 Route를 묶어주었다.

또한 Route 컴포넌트를 Swtich로 묶어서 사용했다.

또한 Link는 위와같이 사용했었다.

 

라우트 방법 in v6

버전 6에서는 Switch문의 이름이 Routes로 바뀌었다.

또한 exact가 디폴트값으로 탑재되어있어서 해당 경로를 포함하는 경로를 사용하고 싶으면 /* 을 이용해야 한다.

더구나 component 속성은 element로 바뀌었고 컴포넌트를 아예 할당하는 모습으로 직관적이게 바뀌었다.

 

게다가 실제로 사용해보니 BrowserRouter를 App.js에서만 사용할 경우

Router내부에 지정한 컴포넌트에서만 Link 태그를 사용할 수 있었다.

그냥 Link태그를 사용할 경우, Router 태그 안에서만 사용하라는 경고메세지가 출력된다.

그래서 Link태그를 BrowserRouter로 감싸주었더니, 주소창의 주소는 바뀌는데 페이지는 라우팅이 되지 않았다.

 

나는 이 문제가 Router가 여러개라서 발생하는 문제라고 생각되었고 다음의 방법을 통해 해결했다.

1. /index.js

npx create-react-app 을 이용해 만들어지는 index.js에서 BrowserRouter를 감싸준다.

2. /App.js

v5에서는 App.js에 BrowserRouter를 사용했지만, 더 위의 파일인 index.js에 사용했으니 여기서는 생략한다.

3. /components/Links

위의 두 과정을 거치면 평소처럼 Link 태그를 사용해도 된다.

잘 작동하는 모습.

 

동적 라우팅

라우팅 방법이 v5보다 직관적으로 바뀌었다.

v5에선 위와 같이 정의해야 했다.

v6에서는 위와같이 중첩구조로 사용한다.

주소 뒤에 오는 값을 파라미터로 받거나 쿼리스트링을 받을 때 기존에는 props를 이용했다.

params

기존에는 파라미터를 받기 위해 props의 match 객체를 이용했지만 v6에서는 useParams() 훅을 이용한다.

// v5
const Profile = ({ match }) => {
	// v5에선 파라미터를 받아올 땐 match 안에 들어있는 params 값을 참조했었습니다
	const { username } = match.params;
}

<Route path="/profiles/:username" component={Profile} />



// v6
import { useParams } from 'react-router-dom';

const Profile = () => {
	const { username } = useParams();
}

<Route path="/profiles/:username" element={<Profile />} />

예시

파라미터 없을 때

파라미터가 있을 때