deve.K

エンジニアが未来を切り開く。

English

Next.js 入門 useRouter 基礎 ルート制御


スポンサーリンク

オリジナルNext.jsのuseRouter画像

ルーティングとは

ルーティングは、Webへのハイパーリンクと同様に、各Webアプリケーションの重要な側面となっております。

それは、リクエストを処理するコードにリクエストをルーティングするメカニズムとなっているのです。

ルーティングに関連してNext.jsページは一意のURLパスによって参照および識別できます。

簡単に言ってしまえば、ルーティングはユーザーがWebサイトのさまざまなページに移動する為のプロセスです。

pagesディレクトリからデフォルトでエクスポートされたReactコンポーネントとなります。

当ブログの記事では、Next.jsでのルーティングについて知っておく必要のあるルーティング方法を初学者様に解説していきます。

前回では静的および動的ページを作成するLink、およびその小道具のいくつかを使用してページ遷移を実装ができるルーティングでしたが

『useRouter』フックを使用して、Next.jsアプリケーションをナビゲートする方法をご紹介致します。

『next/Link』が分からない方はこちらから学習できます。

dev-k.hatenablog.com

useRouterとは?

Routerオブジェクトに直接アクセスするパッケージとなります。

これは動的ルートでコンテンツをレンダリングするために使用するものであり

Next.jsのページをリンクする際に、Linkコンポーネントを使用しJSXでルーティングを管理するのは非常に便利ですが

プログラムでルーティングの変更をトリガーする必要がある場合があります。

その場合はnext/routerパッケージで提供している、useRouterフックによって返されるルーターオブジェクトであり、それらはいくつかの便利なメソッドを提供致します。

メソッド

・push()メソッド

プログラムによってURLの変更をトリガーできます。

push(url, as, options)

『url』は移動先のURLとなります。

『as』ブラウザに表示されるURLのオプションであり、カスタムURLを使用しURLをより読みやすくする場合もあります。

<Link href="/about" as="/dev-k">
          <a>About </a>
 </Link>

・replace()メソッド

router.replace(url, as, options)

こちらのメソッドはpush()メソッドに非常によく似ています。

履歴スタックに新しいURLを追加しません。

つまり、ブラウザの戻るボタンを押して前のルートに戻ることはできない事になります。

最もよく使用するのは『push()』と『prefetch()』です。

『prefetch()』メソッドは『Link』プログラムによって、ページをバックグラウンドでレンダリングするために必要なリソースをプリフェッチする事が可能となります。

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()

  useEffect(() => {
    router.prefetch('/about')
  })
}

<Link href="/about" prefetch>
  <a>About</a>
</Link>

これはプリフェッチを自動的に処理するタグがない場合に便利となります。 『useRouter』では基本的には Next.jsでAPIをfetchする際にクエリパラメータを使用したい場合に活用したりします。

今回ではまず、『useRouter』フックでルート制御での基礎からしっかり学んでいきましょう。

オプションのデコレータ

『options』次の構成オプションを持ちparamとして送信する設定オプションのオブジェクトです。

router.push('/?counter=10', undefined, { shallow: true })

・shallow 『getStaticProps』や『getServerSideProps』または『getInitialProps』これらを再実行させず、現在のページのパスを更新し変更していきます。

デフォルト状態では全て『false』となっております。

・locale

新しいページでのローケル設定

・scroll

ページ遷移後に先頭にスクロールするかどうかのオプションとなり、デフォルトでは『true』となっています。

useRouter使用例

それでは『pages』フォルダに新しく『blogpage.js』ファイルを作成して下さい。

ファイル内は下記のように記述下さい。

const BlogPage = () => {
    return <div style={{padding: 20}}>
      <h1>Hi, I'm dev.K</h1>
      <p>This is the dev.K blog page.</p>
    </div>
  }
  
  export default BlogPage;

index.jsファイルに下記のように記述します。

import { useRouter } from 'next/router';

export default function Home() {

  const router = useRouter();

  return (
    <div style={{ padding: 20 }}>
      <h1>Home</h1>
      <h2>push()メソッド</h2>
      <p>
        <button onClick={() => router.push('/blogpage')}>
          dev.K ページへ
        </button>
      </p>
      <p>
        <input
          type="checkbox"
          onChange={() => router.push('/blogpage')}
         />チェックボックスをクリックでページ移動
      </p>
      <br />

      <h2>replace()メソッド</h2>
      <div>
        <button onClick={() => router.replace('/blogpage')}>
          dev.K ページに移動しても、Homeには戻れません。
        </button>
      </div>
    </div>
  );
}

それぞれクリックしページ移動してみて下さい。

チェックボックスでは、push()メソッドにURLを渡す事によりチェック時にページ遷移が可能となります。

replace()メソッドでは、URLエントリを履歴スタックに追加するのを防ぎます

オリジナルuseRouterGIF画像

つまり、一度ページ遷移すると前のページに戻る事はできません。

さらに深く学ぶのであれば、useRouterはURLからクエリパラメータを取得しNext.jsアプリケーションをナビゲートする事が可能です。

『ID』はURLからのクエリに応じて、コンテンツを動的にレンダリングする特別なルートとなっています。

クエリIDを使用してデータベースにクエリを実行してから、動的ページに表示される一致するデータレコードを取得していきます。

完全なURLパスにする際はクエリ文字列を使用します。

JSONデータを用意し、独自の配列を作成します

[
    {
        "id": 1,
    "tirle": "My new next.js app"
    },
    {
        "id": 2,
        "name": "dev.k",
    },
    {
        "id": 3,
        "title": ""
    }
]

動的コンポーネント内で、URLからクエリID(id1、id2、id3、など)にアクセスが可能になります。

const router = useRouter();
    const {id} = router.query;
import Myblog  from '../project.json'

return(
{Myblog.map(myblog => {

 <div key={myblog.id}>

 <h2>{myblog.title}</h2>
 <p>{myblog.name}</p>

 </div>
)}

『useRouter』フックでURLからクエリパラメータを取得する動的ルートは別の記事としてご紹介致します。

当ブログの記事の基礎で『next / link』を使用するだけでなく、貴方はさまざまな方法でルート間を移動する方法を知りました。

本日は以上となります。

最後まで読んで頂きありがとうございます。

プライバシーポリシー