프로젝트 시작을하고 기획이 거의 마무리 되었다. 남는 시간을 통해 React-Router v5에서 v6로 봐끼며 변화된 기능을 공부하기로했다. 벨로퍼트님의 유튜브 영상(React Router v5→v6 빠르게 훑어보기)을 참고했다.

<Switch></Switch> → <Routes></Routes>

//v5에서 함수의 return문 에서 Route사용시 Route들을 Switch component로 묶어줬었다
return (
  <Switch>
    <Route>
      <Home />
    </Route>
    <Route>
      <Mypage />
    </Route>
  </Switch>
  
//v6에서는 Switch component가 삭제되고 Routes Component를 사용한다.
return (
  <Routes>
    <Route>
      <Home />
    </Route>
    <Route>
      <Mypage />
    </Route>
  </Routes>
  

useHistory → useNavigate

• useHistory대신 useNavigate를 사용해야한다.
• useHistory는 객체였지만, useNavigate는 함수다.

//v5 useHistory
const history = useHistory();
 
history.push('/'); // 해당 주소로이동
history.goBack(); // 뒤로가기
histroy.go(-2) // 뒤로 두번가기

//v6 useNavigate 
const navigate = useNavigate();

navigate('/') // 파라미터가 문자일경우 해당 주소로 이동
navigate(-1)  // 뒤로 한번가기, 파라미터가 숫자일경우 앞으로, 뒤로 가기가능
navigate(-2)  // 뒤로 두번가기