使用方法を学ぶ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ハンドブック
その他の次のチュートリアル:
- Next.jsの使用を開始する
- Next.js vs Gatsby vs create-react-app
- Next.jsをインストールする方法
- Linkを使用してNext.jsの2つのページをリンクする
- ルーターを使用したNext.jsの動的コンテンツ
- getInitialPropsを使用してNext.jsコンポーネントにデータをフィードします
- CSSを使用したNext.jsコンポーネントのスタイリング
- Next.jsでコンテンツをプリフェッチする
- ルーターを使用してNext.jsでアクティブなリンクを検出する
- ソースを表示して、SSRがNext.jsで機能していることを確認します
- Next.js:ヘッドタグにカスタムタグを入力します
- Next.jsアプリケーションをNowにデプロイする
- Next.js:Next.jsのサーバー側またはクライアント側でのみコードを実行します
- Next.jsアプリを本番環境にデプロイする
- Next.jsアプリバンドルを分析する方法
- Next.jsでの遅延読み込みモジュール
- Next.jsアプリにラッパーコンポーネントを追加する
- Next.jsによってアプリに追加されたアイコン
- Next.jsアプリバンドル
- Next.jsルーターの使用方法
- Next.jsAPIルートの使用方法
- Next.jsアプリでサーバー側のCookieを取得する方法
- Next.jsアプリのポートを変更する方法