또두리스트 만들어보자!
홈 → 투두리스트
레이아웃 컴포넌트를 적용하고 싶다!
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를 수정해보자.
createBrowserRouter([
{
path: "/",
element: <Root />,
children: [
{
path: "events/:id",
element: <Event />,
},
],
},
]);
children으로 감쌀 수 있구나! 나도 저렇게 해야겠다.