import Link from 'next/link'
Next.js version 13以降
<Link href="/about">About Us</Link>
Next.js version 12以前
<Link href="/about"><a>About Us</a></Link>
useRouter を使用する(こちらがおすすめです)
import { useRouter } from 'next/router';
const router = useRouter();
if (router.isReady) {
router.push({
pathname: '/login',
query: { returnUrl: router.asPath }
})
}
Router
import Router from 'next/router';
Router.push('/home'); // '/home'へ遷移
useRouter は hooks なので、 実際にルーターのインスタンス を取得したときにre-render されるので以下のコードが正しく実行できます。 Routerの場合は まだインスタンスがないので実行できません。
○ OK
import { useRouter } from "next/router";
const router = useRouter();
if (router.isReady) {
router.push("/login");
}
× NG
import Router from "next/router";
if (Router.isReady) {
Router.push("/login");
}
<button onClick={() => router.back()}>
戻る
</button>