# React Nextjs router object

React Nextjs next/router のフック useRouter withRouter で使える Router object 一覧

関数 Component の場合 useRouter クラス Component の場合 withRouter 使います。

Key Type Description
pathname String 現在のルート page 配下のディレクトリ名
query Object 動的ルーティングのパラメータと、クエリパラメータ のオブジェクト
asPath String ブラウザに表示される実際のパス basePath を以降の URL
isFallback boolean fallback モード
basePath String 設定の basePath 値
locale String アクティブ locale
locales String[] アクテイブ locales
defaultLocale String デフォルト locale
domainLocales Array Array<{domain, defaultLocale, locales}>
isReady boolean クライアント側レンダリング OK useEffect 内使える
isPreview boolean プレビューモード

URL https://hapicode.com/blogs/123?page=1

Key Value Description
pathname /blogs/[code] page 配下のディレクトリ
query { code: '123', page: '1' } 動的ルーティングのパラメータ クエリパラメータ
asPath /blogs/123?page=1 basePath を以降の URL

# クライアント側の遷移処理 router.push

interface TransitionOptions {
  shallow?: boolean;        // 浅いルーティングにするか (デフォは false)
  locale?: string | false;  // 新しいページのロケール設定
  scroll?: boolean;         // 遷移後に先頭にスクロールするか (デフォはtrue)
}

push(url: Url, as?: Url, options?: TransitionOptions): Promise<boolean>;
  • as は基本 undefined で良い
  • shallow は getStaticProps や getServerSideProps を実行せずに URL の変更すること

使い方

// String値渡す
router.push("/hapicode/nextjs");

// Object 渡す
router.push({
  pathname: "/blog",
  query: { code: "nextjs" },
});

# 履歴に追加せずに、遷移処理 router.replace

router.replace("/blog");

router.replace(url, as, options);

router.replace を使うと、history スタックに新しい URL エントリは追加されません。

# クライアント側のページプリフェッチ router.prefetch

クライアント側のページ遷移を高速化するためにページをプリフェッチ
next/link は自動的にページのプリフェッチ周りの面倒を見てくれるが、next/link を用いないページ遷移において router.prefetch 使います。

router.prefetch(url, as);

プリフェッチは本番環境限定の機能

開発環境ではページをプリフェッチしません。

# 履歴を1つ戻す router.back

ブラウザ戻るボタン window.history.back() と同じ

<button type="button" onClick={() => router.back()}>
  go back
</button>

# リロード router.reload

ブラウザリロードボタン window.location.reload() と同じ

<button type="button" onClick={() => router.reload()}>
  Click here to reload
</button>

# URL やハッシュの変更を検知 router.events

Event 説明
routeChangeStart(url, { shallow }) ルートの変更が開始した時に発火
routeChangeComplete(url, { shallow }) ルートが完全に変更され終わったときに発火
routeChangeError(err, url, { shallow }) ルート変更時にエラーが発生した際、あるいはルートの読み込みが中止された際に発火
err.cancelled ページ遷移が中止されたかどうかを示す
beforeHistoryChange(url, { shallow }) ブラウザの履歴を変更する直前に発火
hashChangeStart(url, { shallow }) ハッシュが変更されるが、ページが変更されないときに発火
hashChangeComplete(url, { shallow }) ハッシュの変更が完了したが、ページが変更されないときに実行される

routeChangeStart イベントを監視する

import { useEffect } from "react";
import { useRouter } from "next/router";

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url, { shallow }) => {
      console.log(
        `App is changing to ${url} ${
          shallow ? "with" : "without"
        } shallow routing`
      );
    };

    router.events.on("routeChangeStart", handleRouteChange);

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method:
    return () => {
      router.events.off("routeChangeStart", handleRouteChange);
    };
  }, []);

  return <Component {...pageProps} />;
}
import Link, { LinkProps } from "next/link";

export const Navigation = () => (
  <Link href="/">
    <a>トップに戻る</a>
  </Link>
);

Link の Props

export declare type LinkProps = {
  href: Url; // URL もしくは  pagesディレクトリ内のパス
  as?: Url; // ブラウザのURLバーに表示されるパス (動的ルーティング用)
  replace?: boolean; // 履歴に追加せずに、遷移処理をするか (デフォ false)
  scroll?: boolean; // 遷移後に先頭にスクロールするか (デフォはtrue)
  shallow?: boolean; // 浅いルーティングにするか (デフォは false)
  passHref?: boolean; // 子にhrefプロパティを送るか (デフォは false)
  prefetch?: boolean; // バックグラウンドでページをプリフェッチするか  (デフォは true)
  locale?: string | false; // 新しいページのロケール設定
};

# 子要素の a タグに href を渡す passHref

<Link href="/blogs" as="/blogs" passHref>
  <a>Hapicode.com</a>
</Link>
2022-11-15
  • reactjs
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ