表は 1 か所。ページは表を import せず、パターン文字列だけで型付きのリンクを書きます。
:param・ワイルドカード・URL に出ないグループを 1 つの表で書きます。照合は宣言順で先勝ち。特異度ランキングのような、あとから逆算しないと分からない規則を持ちません。Register を宣言すれば表に無いパターンもコンパイルで落ちます。コード生成はありません。<a> がすでにクライアント遷移です。包んでも 2 つ目の書き方が増えるだけなので、型は href が守ります。useMatch('/products/*') で「この区画の配下が開いているか」を聞けます。ブラウザに表が無くても動くので、フレームワークの下のサイドナビもこれで書きます。{ layout, error, children } と並べれば、配下が throw したとき枠を残したまま error が描かれます。新しいページを先頭(または #fragment)へ戻すスクロールもルーターの仕事です。設計ガイドは npm パッケージに同梱されています。AIコーディングエージェントは node_modules/@k8ordo/router/docs/ からインストールした版そのものを読みます。
// routes.ts
export const routes = defineRoutes({
'/': Home,
'/products': {
children: { '/': ProductList, '/:id': ProductPage },
},
'/(docs)': { layout: DocsLayout, error: DocsError, children: { '/guide': Guide } },
'/*': NotFound,
});
// どのページからでも。表は import しない
<a href={href('/products/:id', { id })}>…</a>;
const { id } = useParams('/products/:id');
const inProducts = useMatch('/products/*') !== null; // 表を持たないブラウザでも