private router 처리하기

[SeojinSeojin]

⛓ Related Issues

• close 첫 접속 시 토큰으로 유저 초기화 API 누나쿵, Private Router 처리 #111

📋 작업 내용

• private router 만들기
• 회원가입, 로그인, 렌딩, 마이페이지 제외하고 모두 private router 안에 가두기

📌 PR Point

• 이제 로그인 안 하면 회원가입, 로그인, 렌딩, 마이페이지 제외하고 접근 못 한다!
• 대신 한번이라도 로그인 했다면 다 접근할 수 있다!
• 리라돔 v6에서는 Routes의 자식으로 Route가 아닌 친구를 둘 수가 없어서 이렇게 했읍니다.. 모든 스택오버플로우에서 이 방법밖에 없다고 함 ㅜㅜ

이 파일이 제일 중요함!

import { useLoginUser } from '@hooks/useLoginUser';
import { Navigate, Outlet } from 'react-router-dom';

function PrivateRoute() {
  const { isAuthenticated, isLoading } = useLoginUser();
  return isLoading ? <></> : isAuthenticated ? <Outlet /> : <Navigate to="/" />;
}

export default PrivateRoute;

🔬 Reference

• https://flutterq.com/error-privateroute-is-not-a-component-all-component-children-of-must-be-a-or/
• https://devalice.tistory.com/112
• https://gaemi606.tistory.com/entry/React-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%A0%95%EB%B3%B4-%EC%97%86%EC%9D%84-%EA%B2%BD%EC%9A%B0-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A1%9C-redirect%ED%95%98%EA%B8%B0-react-router-PrivateRoute

[SeojinSeojin]

울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~

[100Gyeon]

Redirect가 사라진 게 충격이구만.. v6 써서 잘 만들었다 수고했엉 👍🏻👍🏻

[NamJwong]

.‌‌ ₍ᐢ๑- ˔ -ᐢ₎ ♡
_( っ /￣￣￣/
(´　 ＼/＿＿＿/)
——————–
고 생 했 어 요 ♡