[react-router-dom] v5 -> v6

• react-router-dom이 v5에서 v6으로 업그레이드 된지 조금 지났다.

v5

<Switch>
  <Route />
</Switch>

v6

<Routes>
  <Route />
</Routes>

1. exact 옵션 삭제

• 기존의 라우트 경우 경로의 앞부분만 일치해도 전부 매칭되기 때문에 정확히 라우트를 일치시키고자 exact옵션을 사용하였다. 하지만 v6부터 exact가 기본으로 적용이 되었고, 만약 하위경로에 여러 라우팅을 매칭시키고 싶다면 다음과 같이 URL 뒤에 *을 사용하면 된다.

v6

<Route path='categories/*' />

2. Route는 Routes의 직속 자식이어야 한다.

• Route를 사용하려면 Routes로 감싸주어야 한다.

v5

<Route path="/" exact component={Home} />

v6

<Routes>
    <Route path="/" element={<Home />} />
</Routes>