TypeScript에 대해서,,,

Outlet: 하위 요소를 렌더링한다.

const router = createBrowserRouter([ //배열을 라우터에 전달
  {
    path: "/",
    element: <Layout/>,
    children: [
      {
        path: "", // "" == "/" -> 그래서 루트 링크에 들어가면 Outlet으로 Home이 렌더링되는 것임!
        element: <Home/>,
      },
      {
        path: "profile", // "/profile" -> 이 링크로 접속 시, Outlet으로 Proflie이 렌더링됨!
        element: <Proflie/>,
      }
    ]
  }
])

function App() {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

export default function Layout() {
    return(
        <>
            <h2>layout</h2>
            <Outlet/> 
        </>
    );
}

위처럼 Outlet을 사용하면 하위 요소의 함수를 렌더링한다.

1) login한 사용자 전용 화면을 만들 때

const router = createBrowserRouter([ //배열을 라우터에 전달
  {
    path: "/",
    element: <Layout/>,
    children: [ // Layout의 요소!
      {
        path: "", // "" == "/" -> 그래서 루트 링크에 들어가면 Outlet으로 Home이 렌더링되는 것임!
        element: <Home/>,
      },
      {
        path: "profile", // "/profile" -> 이 링크로 접속 시, Outlet으로 Proflie이 렌더링됨!
        element: <Proflie/>,
      }
    ]
  },
  { // Layout의 요소가 아님!
    path: "/login",
    element: <Login/>
  },
  {
    path: "/create-account",
    element: <CreateAccount/>
  }
])

위처럼 Layout의 children이 아닌 바깥쪽 객체에 넣으면 된다.