[React] - nested routes 문법 활용

nested-routes 문법은 특정 웹페이지에서 서브경로를 제작할시 주로 사용합니다
또한 여려개의 유사한 페이지를 작성할때 사용되는 문법입니다.

nested routes 이용 전 코드 제작

서브경로를 제작하기전에 location으로 이동하는 Route 코드를 만들겠습니다

<Routes>
<Route path="/company" element={ <div>회사</div> } />
</Routes>

URL 주소에 /company 입력할시 div에 감싸져 있는 회사가 출력됩니다
만약 여기서 company 이후로 추가적인 URL을 만들시에는

<Routes>
<Route path="/company" element={ <div>회사</div> } />
<Route path="/company/member" element={ <div>멤버들</div> } />
<Route path="/company/location" element={ <div>위치</div> } />
</Routes>

이런식으로 /company/member 또는 /company/location로 이동되어 div에 입력된 멤버, 위치
가 출력되게 됩니다.

nested routes 이용해보기

Route 경로에 추가적인 경로를 제작할시에는 /company/member 첫 URL을 계속 먼저 작성 후,
새로운 URL을 작성해야 합니다 그러나, nested routes 문법을 이용하여 새로운 Route 경로를 만들 수 있습니다

처음에 작성했던

<Routes>
<Route path="/company" element={ <div>회사</div> } />
<Route path="/company/member" element={ <div>멤버들</div> } />
<Route path="/company/location" element={ <div>위치</div> } />
</Routes>

이 코드를

<Routes>
<Route path="/company" element={ <div>회사</div> }>
<Route path="/company/member" element={ <div>멤버들</div> } />
<Route path="/company/location" element={ <div>위치</div> } />
</Route>
</Routes>

이렇게 Route태그에 또 다르게 감싸서 이용할 수 있습니다(div태그와 비슷한 개념입니다)