React Router v6! -1

홍인열·2021년 12월 14일
0

프로젝트 시작을하고 기획이 거의 마무리 되었다. 남는 시간을 통해 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)  // 뒤로 두번가기 

profile
함께 하고싶은 개발자

0개의 댓글