ルーティング

PreffX のルーティングは、ルートレベルの url シグナルによって駆動されます。ナビゲーションがそれを更新し、レンダリングされたツリーが自動的に反応します。ライブラリはナビゲーションのソースに依存しません: 利用可能な場合はブラウザの Navigation API で動作し、SSR やヘッドレス環境ではシグナルで管理される独立したナビゲーションにフォールバックします。

URL の読み取り

url ユーティリティは、読み取り専用の URL シグナルです:

import type { PC } from 'preffx';

export const Path: PC = (_props, { url }) => {
    return <p>You are at: {url.value.pathname}</p>;
};

ナビゲーションのトリガー

別の URL に移動するには navigate を使用します:

import type { PC } from 'preffx';

export const Go: PC = (_props, { navigate }) => {
    return <button onClick={() => navigate('/about')}>About</button>;
};

routes を使った宣言的ルート

routes ユーティリティは「パスパターン → コンポーネント」のマップを受け取り、最初に一致したルートのレンダリング内容を保持するリアクティブなシグナルを返します。マッチングは先勝方式です: パターンはオブジェクトのキー順でチェックされます。

import type { PC } from 'preffx';

export const App: PC = (_props, { routes }) => {
    const content = routes({
        '/': () => <div>Home</div>,
        '/:lang?/user/:id': (_, { routeParams }) => (
            <div>User #{routeParams.id} ({routeParams.lang || 'en'})</div>
        ),
        '*': () => <div>Not found</div>
    });

    return (
        <div>
            <a href="/">Home</a>
            <a href="/user/42">User page</a>
            <a href="/ru/user/42">User page (ru)</a>
            <a href="/unknown">Unknown page</a>
            {content}
        </div>
    );
};

ルートパターン

パターン	説明	一致例
/users	静的セグメント	/users
/user/:id	必須パラメータ（:id）	/user/42 → { id: '42' }
/:lang?/home	オプションパラメータ（?）; ない場合は空	/home → { lang: '' }
/files/*	スプラット — （末尾の * 以降の）残りをキャプチャ	/files/a/b → { '*': 'a/b' }
*	キャッチオール — 任意のパスに一致	/anything

注意:

• ルートパラメータは自動的に URI デコードされます。
• パターンはパス名のプレフィックスに一致します: /users は /users/42 にも一致します。完全一致が必要な場合は、キャッチオールまたはより具体的なパターンを使用してください。
• * は最後のセグメントとしてのみワイルドカードとして機能します。それ以外の場所ではリテラルとして扱われます。
• 一致したルートパラメータは routeParams を通じて利用できます。
• ネストしたレイアウトでは、相対パターンは親ルートの一致パスを基準に解決されます。

ネストしたルート

親コンポーネントで routes() を呼び出すと、一致した子コンポーネントが返されたシグナルにレンダリングされます。一致パターンのルートパラメータは routeParams を通じて公開され、コンテキストを通じて子孫でも利用できます。

ユーティリティまとめ

オプション	タイプ	説明
defaultURL	string | URL	初期 URL（SSR ではリクエスト URL を渡します）
url	ReadonlySignal<URL>	現在の URL、リアクティブ
navigate	(url, options?)	ある URL にナビゲートする
routes	(paths) => signal	先勝式のルートレンダリング
routeParams	Record<string, string>	現在一致しているルートのパラメータ