[React] - Outlet을 이용한 중첩 라우팅

 

 

react-router-dom v6부터 outlet을 이용한 중첩 라우팅을 통해 레이아웃을 쉽게 구현할 수 있다  이는 페이지마다 다른 레이아웃을 보여주기에도 굉장히 편리하게 적용할 수 있다.

 

Layout.js

 

 

이전에는 children을 활용해서 라우트에 레이아웃을 연결해주는 방식으로 구현을 했는데  이제 Outlet이 children 역할을 해준다고 이해하면 된다.

 

App.js

 

 

Home과 View는 Layout이 적용되어 있지만 아래 Layout Route로 감싸지 않은 Test 페이지는 레이아웃이 적요되어 있지 않는다 

 

그리고 여담으로 Not Fount 페이지를 구현할 때는 위와 같이 와일드 카드(*) 를 활용한다

 

와일드카드는 모든 텍스트를 매칭하는데 이때 상단에 위치하는 라우트들의 규칙을 모두 확인하고 그래도 일치하는 라우트가  없다면 해당 라우트가 화면에 나타난다.