k8ordo
  • UI
  • Form
  • State
  • Router
  • Static
  • Server
ダークモードに切り替え
k8ordo

Baselineに入った機能を、制限なく使うReactのライブラリ群。

パッケージ
  • @k8ordo/ui
  • @k8ordo/form
  • @k8ordo/state
  • @k8ordo/router
  • @k8ordo/static
  • @k8ordo/server
UI
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AIチャット
  • Generative UI
  • AIエージェント
  • Storybook
リソース
  • GitHub
  • npm

© 2026 k8o — MIT License

組版 — Noto Sans JP / M PLUS 2

@k8ordo/router

URL の pathname 軸を所有します。ルート表がアプリの pathname スキーマそのもので、そこから型・マッチング・リンク・ナビゲーションのすべてが導かれます。search params と履歴エントリの状態は @k8ordo/state の担当で、この境界は URL の "?" と一致します。

npmGitHub

表とリンク

表は 1 か所。ページは表を import せず、パターン文字列だけで型付きのリンクを書きます。

特徴

  • 表が pathname スキーマleaf・branch・:param・ワイルドカード・URL に出ないグループを 1 つの表で書きます。照合は宣言順で先勝ち。特異度ランキングのような、あとから逆算しないと分からない規則を持ちません。
  • パターンから型が生えるparams はパターン文字列から推論され、Register を宣言すれば表に無いパターンもコンパイルで落ちます。コード生成はありません。
  • finished は「画面に出た」intercept のハンドラは React が新しい木を commit した後に解決します。search だけが変わったときはルート木に触れず、スクロールもフォーカスも動かしません。ページが変わったときは、先頭へ戻すのもルーターです。
  • Link を作らないNavigation API の下では素の <a> がすでにクライアント遷移です。包んでも 2 つ目の書き方が増えるだけなので、型は href が守ります。
  • 今どこかは尋ねるuseMatch('/products/*') で「この区画の配下が開いているか」を聞けます。ブラウザに表が無くても動くので、フレームワークの下のサイドナビもこれで書きます。
  • エラー境界も表に書く{ layout, error, children } と並べれば、配下が throw したとき枠を残したまま error が描かれます。新しいページを先頭(または #fragment)へ戻すスクロールもルーターの仕事です。

ドキュメント

設計ガイドは npm パッケージに同梱されています。AIコーディングエージェントは node_modules/@k8ordo/router/docs/ からインストールした版そのものを読みます。

Home
// 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; // 表を持たないブラウザでも