자식 경로 요소를 렌더링하려면 부모 경로 요소에서
<Outlet/>
을 사용해야합니다. 하위경로가 렌더링될때 중첩된 ui가 표시될 수 없다.
부모 라우트가 정확히 일치하면서 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 아무것도 렌더링하지 않는다.
function App(){
return (
<div>
<h1>Welcome to the app!</h1>
<nav>
<Link to="/">Home</Link>
<Link to="/teams">Teams</Link>
</nav>
<div>
<Outlet />
</div>
</div>
)
}
=> app컴포넌트가 레이아웃 컴포넌트가 되는 것
현재위치 객체를 반환한다. 현재 위치가 변경될 때 마다 일부 side effect를 수행하려는 경우 유용하다