ufbr

Universal File-Based Router - A framework-agnostic file-based routing solution for modern web applications.

ufbr automatically generates routes from your file structure, eliminating the need for manual route configuration. Perfect for building single-page applications with intuitive file organization.

Features

• 📁 File-Based Routing - Routes automatically generated from your file structure
• ⚡ Sync & Async Components - Support for both synchronous and asynchronous component loading
• 🔗 Nested Routes - Build hierarchical route structures effortlessly
• 🎯 Dynamic Routes - Create parameterized routes with [param] syntax
• 🎨 Framework Agnostic - Works with Preact, Solid, Ziko, Vue, and more

Installation

npm install ufbr

Quick Start

Basic Usage

import { createFileBasedRouter } from 'ufbr/[FRAMEWORK]'

createFileBasedRouter({
  pages: import.meta.glob('./pages/**/*.[jsx,js]'),
  target: document.body
})

API

createFileBasedRouter(options)

Options:

• pages (object) - Result of import.meta.glob() pattern with all page components
• target (Element) - DOM element where the router will render components
• base
• renderer

File Structure Example

pages/
├── index.[extension]           → /
├── about.[extension]           → /about
├── blog/
│   ├── index.[extension]       → /blog
│   └── [id].[extension]        → /blog/:id
└── user/
    └── [name].[extension]      → /user/:name

Path Mapping Matrix

Supported file-based routing conventions and their transformed route masks.

File Path	Transformed Route	Type
pages/index.js	/	Static
pages/about.js	/about	Static
pages/contact/index.js	/contact	Static
pages/(auth)/login.js	/login	Route Group
pages/(dashboard)/settings.js	/settings	Route Group
pages/(shop)/products/index.js	/products	Route Group
pages/articles.[id].js	/articles/[id]	Flat Dynamic
pages/articles.[id].[lang].js	/articles/[id]/[lang]	Flat Dynamic
pages/(shop)/items.[cat].[id].js	/items/[cat]/[id]	Group + Flat Dynamic
pages/blog/[id].js	/blog/[id]	Dynamic Segment
pages/users/[id]/posts/[postId].js	/users/[id]/posts/[postId]	Nested Dynamic
pages/docs/[...slug].js	/docs/[...slug]	Catch-All
pages/files.[...path].js	/files/[...path]	Flat Catch-All
pages/shop/[[...categories]].js	/shop/[[...categories]]	Optional Catch-All
pages/docs.[[...slug]].js	/docs/[[...slug]]	Flat Optional Catch-All

License

MIT