Next.jsルーターの使用方法

使用方法を学ぶ`next/router`Next.jsのルートを制御するパッケージ

にLinkを使用してNext.jsの2つのページをリンクするLinkコンポーネントを使用して、Next.jsアプリでルーティングを宣言的に処理する方法を見てきました。

JSXでルーティングを管理するのは非常に便利ですが、プログラムでルーティングの変更をトリガーする必要がある場合もあります。

この場合、で提供されているNext.jsルーターに直接アクセスできます。next/routerパッケージ、およびその呼び出しpush()方法。

ルーターにアクセスする例を次に示します。

import { useRouter } from 'next/router'
export default () => {
const router = useRouter()
//…
}

呼び出してルーターオブジェクトを取得したらuseRouter()、そのメソッドを使用できます。

これはクライアント側ルーターであるため、メソッドはフロントエンド向けのコードでのみ使用する必要があります。これを確実にする最も簡単な方法は、呼び出しをuseEffect()Reactフック、または内部componendDidMount()Reactステートフルコンポーネントで。

あなたが最も使用する可能性が高いものはpush()そしてprefetch()。

push()フロントエンドで、プログラムによってURLの変更をトリガーできます。

router.push('/login')

prefetch()プログラムでURLをプリフェッチできるので、URLがない場合に便利です。Linkプリフェッチを自動的に処理するタグ：

router.prefetch('/login')

完全な例：

import { useRouter } from 'next/router'
export default () => {
const router = useRouter()
useEffect(() => {
router.prefetch(’/login’)
})
}

ルーターを使用してリッスンすることもできますルート変更イベント。

私の無料ダウンロードNext.jsハンドブック