react-router : navigate

LaunchShoe 컴포넌트를 다시 살펴보자.
useParams를 이용해서 shoes db안에 해당 shoes가 없으면 * 가 목적지인 link를 리턴하게 했다.

그러나 다른 방법으로 길을 설정할 수 있다. 바로 useNavigate를 이용하는 것이다.

function LaunchShoe() {
  const navigate = useNavigate();
  const { s } = useParams();
  const shoe = shoes[s];
  if (!shoe) {
    return (
      <h1>No shoes found</h1>
      <button onClick={()=>navigate('/')}>Go back to home!</button>
    )
  }
  
}

shoes가 없을떄 useNavigate가 홈으로 보내준다. 사실 useNavigate는 history 객체라고 보면 된다. 그래서 -,+ 값을 pass해주면(ex>navigate(2)) 페이지 history안에 데이터가 쌓이면서 앞,뒤로가기 버튼이 활성화 된다.

history객체와 같다면 movieApp에서 했던것 처럼 data를 pass해줄 수 도 있겠네?? 맞다!

// LaunchShoe
return (
  <h1>No shoes found</h1>
  <button onClick={()=>navigate('/',{state:'데이터 보내기 쓩!'})}>Go back to home!</button>
)


// Home
const location = useLocation();
return (
  <div>
    <h1>Welcom Home!</h1>
    <p>{location.state}</p> // 데이터 보내기 쓩!
  </div>
);

navigate 두번째 인자로 객체를 보낼 수 있다. 단, key는 반드시 state여야만 한다. 그리고 useLocation으로 꺼내 쓸 수 있다.({state:'',replace:true}라고 하면 history가 replace된다.)

근데, useNavigate말고 또 다르게 보낼 수 있는 방법이 있다. 바로 Navigate 컴포넌트를 쓰는 것이다.

// LaunchShoe
return (
 <>
  <Navigate replace to='/' />
 </>
)

라고 하면 된다. 리액트의 다양한 기능중 router하는 법을 알아보았다. window.history로 플젝을 한 경험이 있어서 그런가 나름 쉽게 개념을 익힐 수 있었고 신기했다. 끝!

출처: https://www.youtube.com/watch?v=4NpGzBEySvI