✏️ Next.js
[Next.js] useRouter()
category
✏️ Next.js
date
thumbnail
slug
next-js-useRouter
author
status
Public
tags
summary
type
Post
client component에서만 사용 가능
‘use client’를 사용useRouter()를 이용한 페이지 이동 방식
'use client';
import { useRouter } from 'next/navigation';
export default function Page() {
const router = useRouter();
return (
<button type="button" onClick={() => router.push('/dashboard')}>
Dashboard
</button>
);
}router.push(’이동할 경로’)⇒ 버튼 클릭 시 /dashboard 페이지로 이동
router.back()- 뒤로 가기
router.forward()- 앞으로 가기
router.refresh()- 바뀐 내용만 새로고침(브라우저의 새로고침과는 다름 - 전체 새로고침이 아니라 변동사항이 있는 일부분만 바꿔줌)
router.prefetch('경로')- 페이지 미리로드
<Link>에도 prefetch 기능이 내장되어 있다.<Link>에서 prefetch 기능 끄는 방법<Link>안에prefetch={false}넣기
usePathname() - 현재 URL 출력
'use client';
import { usePathname } from 'next/navigation';
export default function ExampleClientComponent() {
const pathname = usePathname();
return <>Current pathname: {pathname}</>;
}
useSearchParams() - Search parameter 출력
'use client';
import { useSearchParams } from 'next/navigation';
export default function SearchBar() {
const searchParams = useSearchParams();
const search = searchParams.get('search');
// URL -> `/dashboard?search=my-project`
// `search` -> 'my-project'
return (
<>Search: {search}</>
);
}
