React - ProtectedRoutes (Private Router)

// Outlet - 렌더링하는 영역을 구현하는 Directive
import { Outlet } from "react-router-dom";
import Signin from '../../Pages/Signin'

const useAuth = () =>{
    const token = localStorage.getItem("Authorization")
    return token;
}

const ProtectedRoutes = () =>{
    const isAuth = useAuth();
    return isAuth !== null ? <Outlet /> : <Signin />
}

export default ProtectedRoutes;


// 아래처럼 감싸주면 된다.
<Route element={<ProtectedRoutes />} >
  <Route path="/mypage" element={<Mypage />} />
  <Route path="/post" element={<Post />} />
  <Route path="/UpdateUserInfo" element={<UpdateUserInfo />}/>
  <Route path="/Detail/:id" element={<Detail />}/>
</Route>