먼저 평화롭게 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