k8ordo
  • UI
  • Form
  • State
  • Router
  • Static
  • Server
Switch to dark mode
k8ordo

React libraries that use Baseline features without holding back.

Packages
  • @k8ordo/ui
  • @k8ordo/form
  • @k8ordo/state
  • @k8ordo/router
  • @k8ordo/static
  • @k8ordo/server
UI
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI Chat
  • Generative UI
  • AI Agents
  • Storybook
Resources
  • GitHub
  • npm

© 2026 k8o — MIT License

Typeset in Noto Sans JP & M PLUS 2

@k8ordo/router

The URL's pathname axis, owned. The route table is the application's pathname schema, and from it come the types, the matching, the links and the navigation. Search params and history-entry state belong to @k8ordo/state — the division is the URL's own "?".

npmGitHub

The table, and a link

The table lives in one place. Pages never import it — a typed link needs only the pattern string.

Features

  • The table is the schemaLeaves, branches, :param segments, wildcards and groups that structure without appearing in the URL, all in one table. Matching is in declaration order, first match wins — no specificity ranking to reason backwards from.
  • Types come from the patternParams are inferred from the pattern literal, and once Register is declared a pattern the table does not have fails to compile. No code generation.
  • finished means on screenThe intercept handler resolves after React commits the new tree. When only the search moved, the route tree is left alone and neither scroll nor focus is disturbed; when the page changed, the router is what puts it at the top.
  • No Link componentUnder the Navigation API a plain <a> is already a client navigation. Wrapping it would add a second way to write the same thing; href is what makes it typed.
  • Ask where you areuseMatch('/products/*') answers whether a page under a section is showing. It needs no table in the browser, which is why a sidebar under the framework asks with it too.
  • Error boundaries live in the tableName an error beside a layout and, when what is below throws, it renders inside the layout with the frame intact. Scrolling a new page to the top — or to its #fragment — is the router’s job too.

Documentation

The guide ships inside the npm package. An AI coding assistant reads the exact installed version out of 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; // 表を持たないブラウザでも