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

使用方法を学ぶnext/routerNext.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ハンドブック


その他の次のチュートリアル: