[React] react-router-dom Outlet 이동하지 않을 때

원하는 페이지로 이동하지 않는 오류

시도한 방법

알고보니 Outlet과 관련된 문제였고 내가 Outlet의 개념을 정확히 몰라서 ㅎㅎ ㅠ 설정을 잘못 한 것이 문제였다

우선 라우팅되는 경로들을 확인했을 때 로그인 후 ProtectedRoute로 이동 -> 로그인 되지 않은 경우 (예외처리) SignIn 페이지로 이동 -> 그렇지 않은 경우 Outlet 반환인 것을 확인했다.

  const routesForAuthenticatedOnly = [
    {
      path: "/",
      element: <ProtectedRoute />,
    },
    {
      path: "",
      element: <Home />,
    },
    {
      path: "/profile",
      element: <Profile />,
    },
  ];

 

export const ProtectedRoute = () => {
  const { isSignIn } = useAuth();
  const { pathname } = useLocation();
  console.log(isSignIn);
  console.log("here");
  // 생략
  
  return <Outlet/>
}

 

로그인이 잘 됐는지, ProtectedRoute로 이동은 하는지 확인하기위해 로그를 찍어보았고, 정상적으로 접속하고 있는 것을 확인했다.

이 때서야 그럼 isSignIn일 때는 어디로 이동하는 거지? 의문이 들었고 Outlet에대해 알아보았다.

 

해결한 코드

const routesForAuthenticatedOnly = [
  {
    path: "/",
    element: <ProtectedRoute />,
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "/profile",
        element: <Profile />,
      },
    ],
  },
];

Outlet은 하위 컴포넌트들을 보여주는 것이기 때문에 children을 지정해주면 된다 :)...