[React] nasted routes = 서브 경로

Nasted routes

• /category/front-end
• /category/back-end

위 링크 경로 처럼 나눠 주는 걸 nasted routes라고 함

 

React에서는 react-router-dom 패키지를 활용해서

<Route path="/category/front-end" element={ <div>프론트엔드</div> } />
<Route path="/category/back-end" element={ <div>백엔드</div> } />

 

<Route path="/category" element={ <Category/> } >  
  <Route path="front-end" element={ <div>v프론트엔드</div> } />
  <Route path="back-end" element={ <div>백엔드</div> } />
</Route>

 

이런 방법들로 만들 수 있음.

---

function Category(){
  return (
    <div>
      <h4>카테고리</h4>
      <Outlet></Outlet>
    </div>
  )
}

 

• Outlet을 사용하면 nasted routes안의 element들을 보여줄 곳을 표기할 수 있음.
• <Outlet> 자리에 <div> 박스가 들어감.
  • 유사한 서브페이지를 만들 때 유용함.