또두리스트 만들어보자!

홈 → 투두리스트

레이아웃 컴포넌트를 적용하고 싶다!

react-router-dom에서는 Outlet 컴포넌트로 가능하다.

export function Outlet(props: OutletProps): React.ReactElement | null {
  return useOutlet(props.context);
}

export function useOutlet(context?: unknown): React.ReactElement | null {
  let outlet = React.useContext(RouteContext).outlet;
  if (outlet) {
    return (
      <OutletContext.Provider value={context}>{outlet}</OutletContext.Provider>
    );
  }
  return outlet;
}

아하 Provider로 감싸는구나

createRouter 수정

그 전에, 기존에 만들었던 createRouter를 수정해보자.

createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "events/:id",
        element: <Event />,
      },
    ],
  },
]);

children으로 감쌀 수 있구나! 나도 저렇게 해야겠다.