들어가기
- 이전에 프로젝트를 진행하면서 React Router가 6버전으로 올라가면서 많은 부분에서 변경이 있었다는 이야기를 들었다.
- 이번에 개인 프로젝트를 새로 진행하면서 6버전으로 프로젝트를 진행했는데 생각보다 많이 달라서 사용하면서 정리했던 부분을 TIL에 남긴다.
바뀐 부분
Switch대신 Routes를 사용
- Route를 감싸고 매칭되는 path를 보내는 역할을 했던
Switch에서 Routes를 쓰도록 변경되었다.
exact 옵션이 사라짐
- 이전에 해당 컴포넌트 하나만 보여주기 위해서
Route에exactprop을 넣어주면 되었는데 그런 옵션이 사라졌다. - 대신 경로(path) 뒤에
/*을 삽입해 주는 방법을 사용.
라우트에 컴포넌트 삽입 방법 변경
- 이전에는
componentprop에 넣어줬는데element로 변경
그 외
useHistory를 통해 페이지를 보내거나 변경하는 식의 기능들이 전부useNavigate로 변경되었다.useHistory는 객체 형태였지만useNavigate는 함수 형태history.push(/user/${id});,naviagate('/');