Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- javascript
- .env
- 컴포넌트 최적화
- react-dom
- 프로그래머스
- medinum
- React Router dom v6
- tailwindcss
- commitlint
- React
- React Private Routes
- Vite
- Biweekly Contest 79
- leetcode
- 모던 자바스크립티 Deep Dive
- React.memo
- Sanity.io
- 호이스팅
- toast-ui-editor
- engines locking
- React Public Routes
- sql
- 모던 자바스크립트 Deep Dive
- next.js
- next-auth
- Weekly Contest
- Medium
- BFS
- eslintrc
- LV. 2
Archives
- Today
- Total
목록React Public 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