react - 중첩라우팅

중첩 라우팅

1. Outlet 사용

<Routes>

    <Route path="/" element={<Main/>}/>

    <Route path="/product" element={<Product/>}/>

    <Route path="/detail" element={<Detail/>}>

        <Route path="detail1" element={<Detail1/>}/>

        <Route path="detail2" element={<Detail2/>}/> 

    </Route>

</Routes>

 

return (

    <div>

        상품상세보기입니다.

        <Outlet/>

    </div>

)

 

2. 부모 Route의 path마지막에 /* 표시 ==> 중첩 라우터의 사용을 명시적으로 표시

자식 라우터는 부모 라우터 컴포넌트 안에 작성