[react] useNavigate 함수로 페이징 처리하기

useNavigate() 함수를 이용해서 페이징 처리하는 부분을 정리한다.

 

const nav = useNavigate();

  const onClick = () => {
    nav("/search");
  }
return (
    <>
    <div>
      <button onClick={onClick}>서치 페이지로 이동</button>
    </div>
)

 

리엑트에서 동적 파라메터를 넘기는 방법은

useSearchParams 와 useParams를 이용할 수 있다.

<Routes>

<Route path="/" element={<Home />} /> // path 페이징 처리

<Route path="/search" element={<Search />} /> 

<Route path="/country/:code" element={<Country />} /> // 인자로 받아오게 처리

<Route path="*" element={<NotFound />} />

</Routes>