중첩라우팅
먼저 평화롭게 APP 에서 전체 Router 를 만들어본다. 이 때 두 가지를 지켜야 한다.
이 때 Router 는 앱 내에 단 하나만 있어야 한다. (이 Router 가 쓰이는 곳이 main Router 인 것이다.)
그리고 각각의 Route 는 Routes 에 묶여야 한다.
그리고 특정 Route 에 중첩 Route 를 하고 싶다면 일단 위의 코드처럼, 와일드카드를 써야 한다.
<Routes>
<Route path="/workspace/*" element={<Workspace />} />
</Routes>
이 이유에 대해서는 추후 설명한다.
중첩 라우트가 되는 코드이다.
Route 내에서 간단하게 channel, dm 이런 식으로만 적어준다.
그러면 /workspace/channel (혹은 dm)의 효과가 있다.
이 때 주의할 점은 react v6 에서는 반드시 부모 Route 에 와일드카드를 넣어야 한다는 것이다.
<Routes>
<Route path="channel" element={<Channel />} />
<Route path="dm" element={<DirectMessage />} />
</Routes>
중첩 라우트가 되는 코드이다.
Route 내에서 간단하게 channel, dm 이런 식으로만 적어준다.
그러면 /workspace/channel (혹은 dm)의 효과가 있다.
이 때 주의할 점은 react v6 에서는 반드시 부모 Route 에 와일드카드를 넣어야 한다는 것이다.
Reference
https://basemenks.tistory.com/248
Author And Source
이 문제에 관하여(중첩라우팅), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kjd3495/중첩라우팅저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)