[react-router-dom][v6] URL 파라미터를 통해 하위 경로로 이동하기

영화 리스트를 보여주는 페이지와 특정 영화의 상세 정보를 보여주는 페이지를 react-router-dom 패키지를 통해 구현하고자 했다.

 

다음과 같이 구현해도 정상적으로 동작하였지만  'movies'가 공통적으로 들어가기 때문에 하나의 그룹으로 경로를 묶고자 하였다.

<Routes>
	<Route path="/movies" element={<Movies />} /> 		// 영화 리스트를 보여주는 페이지
	<Route path="/movies:id" element={<Detail />} />	// 영화 상세정보를 보여주는 페이지
</Routes>

 

따라서 다음과 같이 'movies'를 그룹화하여 구현하였다.

<Routes>
	<Route path="/movies">
		<Route path="" element={<Movies />} /> 		// 영화 리스트를 보여주는 페이지
		<Route path=":id" element={<Detail />} />	// 영화 상세정보를 보여주는 페이지
	</Route>
</Routes>

 

처음에는 다음과 같이 구현하였지만 정상 작동하지 않았다.

<Routes>
	<Route path="/movies" element={<Movies />}> // 영화 리스트를 보여주는 페이지
		<Route path=":id" element={<Detail />} /> // 영화 상세정보를 보여주는 페이지
	</Route>
</Routes>

 

공식 문서에서 어떤 차이가 있어 정상 동작하지 않는지 확인하고자 하였으나 해당 페이지에는 별도의 내용이 기술되어있지 않았다.

https://reactrouter.com/docs/en/v6/components/route

React Router | Route