React Outlet 기능을 알아보자

1. 사용방법

• <Route>안에 <Route>를 넣을 수 있는데 이걸 Nested routes라고 합니다
• /test/a로 이동시 test와 a를 보여주면 /test/b로 이동시 test와 b를 보여줍니다.

<Route path="/test" element={ <Test/> } >  
  <Route path="a" element={ <div>A입니다</div> } />
  <Route path="b" element={ <div>B입니다.</div> } />
</Route>

 

2. 상위 Route에서 설정하기

• test 아래 이동한 주소값에 따라 a와 b가 보이게 됩니다.

function Test(){
  return (
    <div>
      <h4>test</h4>
      <Outlet></Outlet>
    </div>
  )
}