useRouter
Next.js에서 함수 형식으로 라우팅 할 수 있게 해주는 Next.js 기본 라이브러리로 React에서 useNavigate 또는 useHistory와 같은 역할을 한다.
<첫번째 방법>
import { useRouter } from "next/router"
const PushPage = () => {
const router = useRouter();
useEffect(() => {
setTimeout(() => {
router.push("/");
}, 5000);
}, []);
}
export default PushPage;
<두번째 방법>
import { useRouter } from "next/router"
const PushPage = () => {
const router = useRouter();
return (
<div>
<button onClick={() => router.push({
pathname: "/",
query: {
name: "john",
age: "19",
},
})} value="Push">
버튼
</button>
</div>
)
}
export default PushPage;
위와 같이 사용하며 router.push(URL) 형식으로 해당 URL로 이동한다. 또한 버튼 클릭시 "/" 경로로 이동하며, query로 url에 정보를 담아준다.
import { useRouter } from "next/router"
const ReplacePage = () => {
const router = useRouter();
return (
<div>
<button onClick={() => router.replace("/", "/replace")} value="Push">
버튼
</button>
</div>
)
}
export default ReplacePage;
위와 같이 router.replace(URL1, URL2) 형식으로 URL1으로 이동후, URL2로 주소만 변경한다.