# 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);

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

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

# 履歴を１つ戻す 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} />;
}

# Link コンポーネント next/link

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 1年前

reactjs

eslint rule React Hook useEffect has missing dependencies を解消する

React Hook useEffect の warning について ESLint 制御と use...

Next.js の html lang を ja に設定

html lang 属性を適切に設定してアクセシビリティやSEOに役立ちます。...

React 状態管理　 Recoil

Recoil使って React 状態管理します。不要な再レンダリングせず、状態共有をらくにしてくれる...

React Ref ができること

React Refでファイル操作するjavascript createRef API使ってdom操作...