react-router-dom v6

• react-router-dom v6은 React 16.8 이상부터 호환됩니다.

 

• Route들을 구성하는 부모요소인 Switch가 Routes로 이름이 변경되었습니다.

 

• v5에서는 path가 '/' 였다면 '/'로 시작되는 모든 path가 매칭되는 규칙이 있었기 때문에 완전한 매칭을 위해서 exact 속성을 사용하였으나, v6에서는 exact 속성이 삭제되고 자동으로 매칭되며, 여러 라우팅을 매칭하고 싶은 경우에는 URL뒤에 *를 붙여줍니다.

 

• 기존 Route 컴포넌트의 component 속성과 render 속성이 사라지고, element 속성에 직접적으로 컴포넌트를 넣어주는 방식으로 변경되었습니다.

 

• useHistory가 useNavigate로 변경되었습니다. useNavigate는 함수이며 문자열을 넣으면 해당 url로, 숫자를 넣어주면 앞,뒤로 이동할 수 있습니다.

 

• url, path 등을 위해 사용하던 useRouteMatch 역시 사라졌으며, 대신 상대경로를 쓸 수 있게 되었습니다.(/something은 안되고 something으로 매치된 라우트의 상대경로를 지정할 수 있습니다.)

 

•  Optional URL 파라미터가 사라졌습니다. 만약 기존에 /option/:value? 파라미터를 가진 라우트가 있고 이를 대체하려면 /option/:value와 /option인 라우트를 두개 만들어주면 됩니다.

 

• 컴포넌트 내부에 Routes, Route를 사용했다면 이를 밖으로 빼고 Outlet으로 대체할 수 있게 되었습니다.  

 

• 현재 페이지가 활성화 되어있으면 링크에 또 다른 스타일을 지정할 수있는 NavLink에 activeStyle, activeClassName 대신 style, className에 함수를 넣어주는 방식으로 바뀌었습니다.