골자는 같다

<Route/>로 사용하던방식에서 createBrowserRouter로 넘어왔다.
하지만 인증 라우트의 골자는 같다. 로직에따라 Outlet를 리턴하던가 Navigate를 리턴한다.

const AuthRoute = () => {
  const { pathname } = useLocation();
  const { data, isSuccess, isLoading } = useAuthCheck();
  if (isLoading) {
    return <div>로딩중~</div>;
  }
  if (!data && !isSuccess) {
    if (pathname === '/login' || pathname === '/') {
      return <Outlet />;
    }
    alert('로그인이 필요한 페이지 입니다');
    return <Navigate to='/' />;
  }
  if (pathname === '/login' || pathname === '/') {
    alert('로그인 한 유저는 접근할 수 없는 페이지 입니다');
    return <Navigate to='/main' />;
  }

  return <Outlet />;
};

if문때문에 가독성이 좀 그렇지만...요약하자면 이렇다.

1. useAuthCheck으로 인증정보를 가져온다.
2. 인증정보가 없고 + 인증에 실패했다면.
   a. 로그인 페이지라면 보여준다.
   b. 로그인이 필요한 페이지라면, 로그인 페이지로 돌려보낸다.
3. 인증에 성공했다면.
   a. 로그인 페이지라면 메인페이지로 리다이렉트 한다.
   b. 로그인 페이지가 아니라면 보여준다.

이런 로직이다.