목록React Private Routes (1)

뚜벅

React Router dom v6 - React Protected Routes

React Router dom을 이용해서 프로젝트를 진행 중 로그인 여부에 따라 보이는 경로를 다르게 할 방법이 없을까! 고민하다 공부한 내용을 정리 해봅니다. 예를 들어 다음과 같은 경로가 있고, 1. 로그인하지 않은 유저는 "/todo" 경로로 이동할 경우 "/" 경로로 리다이렉트 한다.라는 조건이 있는 경우 아래와 같이 utils 폴더에 PrivateRoutes.jsx 파일을 생성하여 아래와 같이 작성해줍니다. Context API를 사용해서 로그인 여부를 관리해줬는데, 이때 로그인되지 않은 경우, "/" 경로로 리다이렉트 해줍니다. 그리고 로그인된 경우 Outlet를 사용해서 자식 경로 요소를 렌더링 해줍니다. 그리고 App 컴포넌트에서 Private 경로의 라우트에 생성한 PrivateRoute..
React 2022. 8. 24. 02:22
이전 Prev 1 Next 다음