React Router v6에 변경점
Post

React Router v6에 변경점

들어가기

  • 이전에 프로젝트를 진행하면서 React Router가 6버전으로 올라가면서 많은 부분에서 변경이 있었다는 이야기를 들었다.
  • 이번에 개인 프로젝트를 새로 진행하면서 6버전으로 프로젝트를 진행했는데 생각보다 많이 달라서 사용하면서 정리했던 부분을 TIL에 남긴다.

바뀐 부분

Switch대신 Routes를 사용

  • Route를 감싸고 매칭되는 path를 보내는 역할을 했던 Switch에서
  • Routes를 쓰도록 변경되었다.

exact 옵션이 사라짐

  • 이전에 해당 컴포넌트 하나만 보여주기 위해서 Routeexact prop을 넣어주면 되었는데 그런 옵션이 사라졌다.
  • 대신 경로(path) 뒤에 /*을 삽입해 주는 방법을 사용.

라우트에 컴포넌트 삽입 방법 변경

  • 이전에는 component prop에 넣어줬는데 element로 변경

그 외

  • useHistory를 통해 페이지를 보내거나 변경하는 식의 기능들이 전부 useNavigate로 변경되었다.
  • useHistory는 객체 형태였지만 useNavigate는 함수 형태
  • history.push(/user/${id});, naviagate('/');

Reference