리액트 강의를 듣는데...

강의 내용에 사용된 라우터가 v5버전이라

매우매우 심각하게 다르고 호환이 안된다...

찾아보니 너무 많은게 달라져서 이곳에 정리 해보려 한다.

React Router v6

import 부분은 변경사항이 없으니 패스 하고 진행하겠다.

1. <Swith> 에서 <Routes>로!

Routes 안에는 Route 를 넣으면 된다.

   <Routes>
     <Route path="/login" element={<LogIn />} />
     <Route path="/signup" element={<SignUp />} />
     <Route path="/workspace/channel" element={<Channel />} />
   </Routes>

2. exact 삭제

명시적으로 해당 url에만 접근가능하도록 위해 exact는 필수였다.
하지만 v6에서는 아예 기본 전제가 바뀌어서 exact가 기본으로 되어있어 exact 속성이 사라지게 되었다.
exact 없이 있는 url 형식으로 구성하기 위해서는 " * "를 사용하도록 권고한다.

<Routes>
  <Route path="member/*" element={<Member />} />
</Routes>

3. <Redirect /> 삭제

Redirect가 사라지고 Routes안에는 Route만 넣을 것을 권고하고 있다.
Redirect는 Route 아래 element 속성에 Navigate로 replace속성과 to="url" 속성을 넣어줘서 redirect가 가능하도록 한다.

  <Routes>
    <Route path="*" element={<Navigate replace to="/workspace/channel" />} />;
  </Routes>

4. 중첩 라우팅

컴포넌트의 children과 같은 개념으로 중첩이 가능해졌다.

만약, member 와 member/:memberId 페이지가 있다고 한다면,
이전에는 각각 한줄씩 차지하였는데,
v6에서는 member 라우트 하위에 :memberId 가 포함된 Route를 추가하면 중첩 라우팅이 된다.
하위에 있으면 자동으로 / 로 구분되기 떄문에 추가적인 / 를 path에 추가할 필요가 없어졌다.

<Routes>
 <Route path="/workspace/:workspace/*" element={<Workspace />} />
     <Route path="/channel/:channel" element={<Channel />} />
     <Route path="/dm/:id" element={<DirectMessage />} />
  </Route>
</Routes>

5. 레이아웃

중첩 라우팅의 구성이 되면 Outlet을 통해서 상위의 컴포넌트를 레이아웃화 할 수 있다.
이전에는 {children}을 사용해서 layout을 구성한다음에 라우트에 항상 레이아웃과 연결짓도록 했는데

<Outlet /> 을 사용하면 {children} 을 사용하는 것과 같은 효과가 난다

<Routes>
  <Route path="/member" element={<Member />}>
  	<Route path=":memberId" element={<MemberInfo />} />
  </Route>
</Routes>


{/* Member */}
<div>
  <header>Member</header>
  <Outlet />  {/* MemberInfo의 component가 Outlet의 위치에 위치하게 된다. */}
</div>