SPA(nextjs)에서 페이지 이동시 url 도 표시해주기

SPA 특성상 pagination 구현시, 페이지 새로고침 없이 데이터를 보여주는 것 가능..

 

1. url에 page 파라미터가 있으면, 그 페이지로도 이동 시키고 싶음

2. SPA방식으로 페이지 새로고침 없이 데이터를 갱신해도 url location에는 page를 바꿔서 보여주고 싶음

 

window.history.replaceState({}, '', newUrl); 가 포인트

// url의 쿼리스트링에서 변수 가져오기
// nextjs 예제임. reactjs는 다르게 구현할 것 
  const searchParams = new URLSearchParams(document.location.search)
  let page = 1;
  if (searchParams.get('page') !== null) page = searchParams.get('page');
  
// 페이지 이동시 호출하는 함수
  const handleChangePage = (event, newPage) => {
    const newUrl = `/dashboard/db/list/?page=${newPage}`
    window.history.replaceState({}, '', newUrl);
    getListData(newPage, rowsPerPage);
  }

아래와 같이 page 파라미터를 추가 

http://localhost:3030/dashboard/db/list/?page=4