Nextjs) URL parameter 제거

검색어

• next qeury hide
• nextjs remove query params
• nextjs router hide query params

---

1. window.history.replaceState (react)

• https://developer.mozilla.org/ko/docs/Web/API/History/replaceState
• history.replaceState(stateObj, title[, url])
• url은 optional

2. router.replace()

• url에서 모든 쿼리 매개변수를 제거한다.
  • router.replace('/??',undefined,{shallow:true});
  • 특정 매개변수만 제거한다.

const removeQueryParam = (param) => {
	const { pathname, query } = router;
	const params = new URLSearchParams(query);
	params.delete(param);
	router.replace(
		{ pathname, query: params.toString() },
		undefined, 
		{ shallow: true }
	);
};

removeQueryParam('something');

• https://stackoverflow.com/questions/65606974/next-js-how-to-remove-query-params

3. Link태그 내의 'as' prop 사용

• Link 의 as는 브라우저 URL 표시줄에 표시 될 경로에 대한 선택적 데코레이터이다.
  • https://nextjs.org/docs/api-reference/next/link

<Link href={{ pathname: "/about", query: { name: "test" } }} as="/about">
	<a>Link with hidden query params</a>
</Link>

• https://www.reddit.com/r/nextjs/comments/j5dkzg/how_to_visit_url_and_hide_its_params_in_browser/

4. push 대신 url 바꾸기(Replace the URL instead of push)

• Link 컴포넌트의 기본 동작은 새로운 URL을 이력(기록) 스택에 푸시하는 것이다. 다음 예와 같이 replace prop을 사용하여 새 엔트리(항목)를 추가하지 않도록 할 수 있다.
• replace - 새 URL을 스택에 추가하는 대신 현재 기록 상태를 바꾼다. 기본값은 false이다.
  • 예) <Link href='/about' replace> About us </Link>
• https://nextjs.org/docs/api-reference/next/link

---

etc

• 페이지를 새로고침하지않고 url을 수정하려면 history.pushState()를 사용한다.
• window.onpopstate로 뒤로/앞으로 버튼 탐색을 감지하는 데 사용할 수 있다.
• shallow?
  • shallow - getStaticProps, getServerSideProps 또는 getInitialProps를 다시 실행하지 않고 현재 페이지의 경로를 업데이트한다. 기본값은 false이다.
  • shallow Routing(얕은 라우팅)
    • https://nextjs.org/docs/routing/shallow-routing
    • 상태를 잃지 않고 라우터 개체(userRouter 또는 withRouter)를 통해 업데이트된 pathname과 query를 받게 된다.
    • 얕은 라우팅을 활성화하려면 shallow옵션을 true로 설정한다.