react router dom v6에서 중첩라우터에 props 보내기

발생한 이슈

중첩 라우팅을 활용해서 같은 페이지에서 중복되는 컴포넌트는 공유하고 추가적으로 필요한 컴포넌트만 띄우고 싶었다.
이전 v5에서는 의 render를 활용해서 prop을 넘길 수 있었는데, v6에서는 render가 사라졌다고 한다. 그래서 찾아본 결과는 다음과 같다.

v6에서 중첩라우팅 하는 방법

1. Router.js 에서 중첩 라우터를 사용하고, 중첩 라우터에서 Outlet 컴포넌트 사용
2. 중첩 라우터 페이지에서 Outlet 컴포넌트 대신 <Routes><Route/></Routes>로 라우터 바로 작성

중첩라우터에 prop 넘기는 방법

1. 처음에는 위에 1번으로 개발을 진행했다.
   상위 라우터에서 Link 태그에 state를 담아서 하위 라우터에 전달하는 방식으로 진행했는데, 이렇게 되면 하위 라우터는 props로 데이터를 전달받는 것이 아닌, useLocation훅에서 state를 꺼내서 사용해야되고 상위에서 어떤 데이터를 넘겨줘야하는지를 명시하기 어려워 더 좋은 방법이 없을까 고민하게 되었다.

• 상위 라우터

<Link to={`${data.postId}`} state={dummyPost}>
  <Pin
    selected={selectedMarker?.postId === data.postId ? true : false}
    state={data.state}>
  </Pin>
</Link>
...
<Outlet />

• 하위 라우터

const { state } = useLocation();

2. 그래서 알게된 방법은 Outlet 컴포넌트 대신 <Routes><Route/></Routes>로 라우터 바로 작성하고 element를 넘겨줄 때 props을 전달하는 것이다. 이렇게 하면 해당 element에서 props의 타입을 지정할 수 있어서 전달해야하는 데이터를 명확하게 알 수 있을 것 같다.

<Routes>
  <Route path=":id" element={<PreviewBottomSheet previewPost={dummyPost} />}/>
<Routes>