중첩 라우팅은 기존 페이지에서 파라미터로 값을 받고 세부 페이지로 이동하고 싶은 예제와 같은 경우에 사용한다.
다음은 Routes태그 앞뒤로 헤더와 푸터를 위치 시키는 방법이다.
서브 페이지 (중첩 라우팅) 작성하기
다소 복잡해 보이지만 /board경로에 element로 Board컴포넌트가 있고
그 내부에 Route로 location이 하위로 들어가게 되는것이다.
location앞에 /를 붙이게 되면 오률가 발생하는것에 주의를 해야한다.
이렇게 작성하면 /board/location으로 접속했을때 board컴포넌트와 지정한 outlet의 컴포넌트가 같이 나타나게 된다.
이제 Board컴포넌트에 서브페이지를 띄울 자리에 Outlet을 설정해주면 된다.
/board/location으로 접속시 게시판 밑에 Outlet이라는 컴포넌트 아래에 우리가 중첩라우팅으로 지정한 BoardOutlet 컴포넌트가 같이 렌더링되는것을 확인할 수 있다.
참고한 포스트에서는 컴포넌트 없이 중첩라우팅을 구현한 방법도 있으니 관심이 있다면 밑의 포스트를 정독하는것도 좋아보인다.
도움을 받은 포스트🙌
FE Developer