React) <Outlet/>의 context를 이용하여 중첩 라우터에 props 넘겨주기 <TIL_2022_07_28>

<Route path="/mypage/:userId" element={<MyPage />}>
  <Route path="fromMe" element={<QuestionFromMe />}></Route>
  <Route path="toMe" element={<QuestionToMe />}></Route>
</Route>

위와 같은 라우팅 구조에서, 부모 컴포넌트로부터 자식 컴포넌트로 넘기고 싶은 값이 있다면 context props로 넘기면 된다.

// 부모 컴포넌트
...
<Outlet context={{ user }} />
...

자식 컴포넌트에서 받아올 때는 useOutletContext라는 훅을 사용한다.

//자식 컴포넌트

// 구조분해할당. const user = useOutletContext().user 와 같은 뜻.
const { user } = useOutletContext();