react-router-dom v6

react-router-dom을 기존에 쓰던 v5 에서 v6로 변경됨에 따라 몇 가지 수정사항이 생겼다

기존의 프로젝트를 진행함에 있어 최대한 오류를 발생시키지 않기 위해 설치 버전을 고정시켜 과거의 버전만을 이용하며, 프로젝트를 진행했었는데, 최신 버전으로 진행해보았는데, 오류가 몇 가지 발생하여 찾아보게 되었다. 이와 관련한 글을 아래에 포스팅 하려고 한다.

1. Switch 대신 Routes

• 기존에는 Switch컴포넌트 안에 Route들을 넣어 경로를 잡아주었다. 하지만 이제는 Routes로 네이밍이 변경되었으며, 그 안에 Route들을 넣어주게 되었다
• 또한 내부 속성도 조금씩 변화가 일어났다. 처음으로 component가 없어지고 element로 대체 되었으며, 안의 선언하는 값또한, 기존의 import해서 바로 담아주었다면, 이제는 태그 형태로 감싸 선언하게 되었다.

v5
<Switch>
	<Route paht="/test" component={test}
</Switch>

v6
<Routes>
	<Route path="/test" element={<test />}
</Routes>

2. exact의 부제

• 기존의 router에서 정확한 네이밍을 집어넣어 명시적으로 해당 url에만 접근가능하도록 하기 위해 사용했던 exact가 없어지고 default값으로 들어가게 되었다.
• 따라서 exact없이 url 형식으로 구성하기 위해서는 뒤에 '*'를 사용하도록 권고한다.

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

3. Redirect의 대체

• Redirect가 사라지고 Routes 안에 Route만 넣을 것을 권고하고 있다.
• 대신 element 속성에 Navigate로 replace속성과 to="url" 속성을 넣어주어 조금 더 직관적으로 redirect가 가능하게 되었다.

4. 중첩 라우팅

• 기존의 페이지를 중첩라우팅을 하려고 할 시, 각각 한 줄씩 차지하였다면, v6에서는 라우터 하위에 : (콜론)을 붙여 route를 추가하면 중첩 라우팅이 된다.
• 하위에 있으면 자동으로 / 로 구분하기 때문에 추가적인 / 를 path에 추가할 필요가 없다.

//v5
<Switch>
  <Route path="/test" />
  <Route path="/test/:testId" />
</Switch>

//v6
<Routes>
  <Route path="/test">
    <Route path=":testId" /> // /test/:testId
  </Route>
</Routes>