React Router dom v6 - React Protected Routes

React Router dom을 이용해서 프로젝트를 진행 중 

로그인 여부에 따라 보이는 경로를 다르게 할 방법이 없을까!

고민하다 공부한 내용을 정리 해봅니다.

 

예를 들어 다음과 같은 경로가 있고,

 1. 로그인하지 않은 유저는 "/todo" 경로로 이동할 경우 "/" 경로로 리다이렉트 한다.라는 조건이 있는 경우

아래와 같이 utils 폴더에 PrivateRoutes.jsx 파일을 생성하여 아래와 같이 작성해줍니다. 

Context API를 사용해서 로그인 여부를 관리해줬는데, 

이때 로그인되지 않은 경우, "/" 경로로 리다이렉트 해줍니다.

그리고 로그인된 경우 Outlet를 사용해서 자식 경로 요소를 렌더링 해줍니다.

 

그리고

App 컴포넌트에서 Private 경로의 라우트에 생성한 PrivateRoutes를 부모 요소로 줍니다. 

2. 로그인 한 사용자는 "/login" , "/join" 경로로 이동할 경우 "/todo"경로로 리다이렉트 한다. 는 조건일 경우

utils 폴더에 PublicRoutes.jsx 파일을 생성하여 아래와 같이 작성해줍니다. 

여기서도 위와 마찬가지로 로그인된 경우, 

"/todo" 경로로 리다이렉트 해주고

아닌 경우 자식 경로 요소를 렌더링 해줍니다. ("/login", "/join")

 

그리고

App 컴포넌트에서 Private 경로의 라우트에 생성한 PrivateRoutes를 부모 요소로 줍니다. 

 

끝!

 

처음에는 각 경로마다 페이지가 마운트 될 때 로그인 여부를 판단하여 경로를 변경해주었는데,

 프로젝트 규모도 커질 경우도 생각한다면이 방법이 더 깔끔한 거 같습니다.

 

 

 

 

 

참고 The New Way To Create Protected Routes With React Router V6

https://youtu.be/2 k8 NleFjG7 I