react-router-dom

[React] 중첩 라우팅, Outlet 사용법

중첩 라우팅 중첩 라우팅이란 라우팅 맵핑을 최상위 컴포넌트만이 아니라 여러 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법이다. 웹 페이지의 헤더는 계속 고정해두면 되기 때문에 아래처럼 쉽게 구현할 수 있다. 하지만 다음과 같은 상황에서는 어떨까? 메인페이지와 마이페이지 마이페이지에서만 사이드 바를 띄우고 싶음 사이드 바에서 항목을 클릭하면 마이페이지 내부에서 또 다시 라우팅을 하고 싶음 사이드 바는 고정 react-router-dom에서 Outlet 기능을 제공하는데, 우리는 이를 사용해서 원하는 대로 구현할 수 있다. 공식문서에서 설명하는 것을 토대로 기본 예제를 만들면서 알아보자. 우선 Router를 아래와 같이 설정해준다. const AppRouter = () => { return ( ); }; ..