NarraLeaf

LayoutRouter

ナビゲーション、クエリパラメータのヘルパー、パスのユーティリティ、履歴の確認メソッドを含む LayoutRouter の全 API

LayoutRouter は、ページとネストされたレイアウトの間のナビゲーションを管理します。従来の線形な PageRouter を置き換えるもので、Layout と Page コンポーネントと組み合わせて、ディレクトリのようなルートツリーを構築します。

import { useRouter } from "narraleaf-react";

const router = useRouter();

基本のナビゲーション

// Absolute navigation
router.navigate("/home");

// With query parameters
router.navigate("/user/profile", { tab: "info" });

// Relative navigation
router.navigate("./detail");

// History control
router.back();
router.forward();

// Replace without pushing history
router.replace("/settings");

// Clear current page & history
router.clear();

// Keep current page but drop history
router.cleanHistory();

クエリのヘルパー

router.setQueryParam("lang", "en");
router.getQueryParam("lang"); // "en"
router.removeQueryParam("lang");

router.setQueryParams({ tab: "general", theme: "dark" });
router.clearQueryParams();

パスのヘルパー

メソッド説明
resolvePath(path)相対パス（例：../parent）を絶対パスに解決します。
matchPath(path, pattern)* と :param に対応した前方一致。
exactMatch(path, pattern)matchPath と同様ですが、セグメント数が一致している必要があります。
extractParams(path, pattern)マッチしたパスから動的パラメータを取り出します。

公開メソッド

新しいパスへ移動します。

  • path: string – 絶対または相対の移動先パス
  • queryParams?: Record<string,string> – 任意のクエリパラメータ
  • return: this
router.navigate("/about");

back

1 つ前の履歴エントリへ戻ります（存在する場合）。

  • return: this

forward

次の履歴エントリへ進みます（存在する場合）。

  • return: this

replace

新しい履歴エントリを追加せずに、現在のパスを置き換えます。

  • path: string – 新しいパス
  • queryParams?: Record<string,string> – 任意のクエリパラメータ
  • return: this

clear

現在のパスと履歴をクリアします。

  • return: this

cleanHistory

現在のエントリ以外のすべての履歴を削除します。

  • return: this

getCurrentPath / getPathname

現在のパス（クエリを含まない）を取得します。

  • return: string

getCurrentQuery / getQueryParams

現在のクエリパラメータのオブジェクトを取得します。

  • return: Record<string,string>

getCurrentUrl

現在の完全な URL（パス + クエリ）を取得します。

  • return: string

setQueryParam

単一のクエリパラメータを設定します。

  • key: string
  • value: string
  • return: this

setQueryParams

複数のクエリパラメータをマージします。

  • params: Record<string,string>
  • return: this

getQueryParam

クエリパラメータの値を取得します。

  • key: string
  • return: string | undefined

removeQueryParam

クエリパラメータを削除します。

  • key: string
  • return: this

clearQueryParams

すべてのクエリパラメータを削除します。

  • return: this

hasQueryParam

クエリパラメータが存在するかどうかを確認します。

  • key: string
  • return: boolean

getQueryParamKeys

すべてのクエリパラメータのキーを取得します。

  • return: string[]

getQueryParamCount

クエリパラメータの数を取得します。

  • return: number

getHistory

ナビゲーション履歴全体を取得します。

  • return: string[]

getHistoryIndex

履歴配列の中での現在のインデックスを取得します。

  • return: number

canGoBack / canGoForward

router が戻る / 進むことができるかどうかを確認します。

  • return: boolean

parseUrl

URL 文字列を { path, query } に解析します。

  • url: string
  • return: { path:string; query:Record<string,string>; }

buildUrl

パスとクエリのオブジェクトから完全な URL を組み立てます。

  • path: string
  • query: Record<string,string>
  • return: string

resolvePath

相対パスを絶対パスに解決します。

  • path: string
  • return: string

normalizePath

パス中の重複したスラッシュや末尾のスラッシュを正規化します。

  • path: string
  • return: string

joinPath

複数のパスセグメントを連結し、結果を正規化します。

  • path: string – 基準となるパス
  • ...paths: string[] – 追加のセグメント
  • return: string

parsePath

パスをセグメントに分割します。

  • path: string
  • return: string[]

buildPath

セグメントの配列からパス文字列を組み立てます。

  • segments: string[]
  • return: string

getParentPath

指定したパスの親パスを取得します。

  • path: string
  • return: string

matchPath

* と :param に対応した前方一致によるパスマッチングです。

  • path: string
  • pattern: string
  • return: boolean

exactMatch

完全一致によるパスマッチングです（セグメント数が一致している必要があります）。

  • path: string
  • pattern: string
  • return: boolean

extractParams

パターンに基づいてルートパラメータを取り出します。

  • path: string
  • pattern: string
  • return: Record<string,string>

onExitComplete / onceExitComplete

すべての退場アニメーションが完了した後に実行されるハンドラを登録します。

  • handler: () => void
  • return: LiveGameEventToken

onPageMount / oncePageMount

ページコンポーネントがマウントされたときに実行されるハンドラを登録します。

  • handler: () => void
  • return: LiveGameEventToken

状態の確認

router.getCurrentPath();  // "/user/profile"
router.getCurrentQuery(); // { tab: "info" }
router.getCurrentUrl();   // "/user/profile?tab=info"

router.getHistory();      // ["/home", "/user/profile"]
router.canGoBack();
router.canGoForward();

Layout と Page を組み合わせた例

import { RouterProvider, RootLayout, Layout, Page, useRouter } from "narraleaf-react";

function MyPages() {
  return (
    <RouterProvider>
      <RootLayout>
        {/* /home */}
        <Layout name="home">
          {/* default page: /home */}
          <Page name={null}>
            <Home />
          </Page>

          {/* /home/detail */}
          <Page name="detail">
            <Detail />
          </Page>
        </Layout>

        {/* /about */}
        <Layout name="about">
          <Page name={null}>
            <About />
          </Page>
        </Layout>
      </RootLayout>
    </RouterProvider>
  );
}

このページの目次

基本のナビゲーションクエリのヘルパーパスのヘルパー公開メソッドnavigatebackforwardreplaceclearcleanHistorygetCurrentPath / getPathnamegetCurrentQuery / getQueryParamsgetCurrentUrlsetQueryParamsetQueryParamsgetQueryParamremoveQueryParamclearQueryParamshasQueryParamgetQueryParamKeysgetQueryParamCountgetHistorygetHistoryIndexcanGoBack / canGoForwardparseUrlbuildUrlresolvePathnormalizePathjoinPathparsePathbuildPathgetParentPathmatchPathexactMatchextractParamsonExitComplete / onceExitCompleteonPageMount / oncePageMount状態の確認Layout と Page を組み合わせた例