[React] 중첩 라우팅 설정후 URL이 변경 되었음에도 페이지에 나타나지 않을때

친구들과 React를 사용해 토이프로젝트를 제작하고 있습니다.

확실히 Vue보다는 입문할때 조금 어렵다는 느낌을 많이 받았고, react-router를 사용해 중첩 라우팅을 할때에 페이지에 제가 원하는 정보가 나오지 않아 조금 헤맷던 부분이 있어 정리하려고합니다.

<Route path='/community-list' element={<CommunityList />}>
  <Route path=':id' element={<CommunityContent />} />
</Route>

다음 처럼 설정을 해주고 /community-list/1이라고 URl이 변경되어도 화면상에 변화가 일어나지 않았습니다.

그 이유를 찾아보니 중첩라우팅을 할때에 부모의 라우트 컴포넌트 내에 자식 컴포넌트의 위치를 지정해줘야 한다고 합니다.

 

그래서 부모의 컴포넌트 내에 <Outlet />이라는 자식 컴포넌트의 위치를 지정해주니 제가 원하는 방향대로 잘 나왔습니다.

 

 

참고 사이트

https://velog.io/@reasonz/2022.07.14-리액트-라우터-중첩-라우팅-nested-routes-outlet

[2022.07.14] 리액트 라우터 - 중첩 라우팅 nested routes, outlet