File-Based Router V2
Automatic route generation from file structure - like Next.js but simpler
Interactive Route Discovery
File Structure → Routes
src/app
layout.js/LAYOUT
page.js/
dashboard
page.js/dashboard
layout.js/dashboard/*LAYOUT
analytics
page.js/dashboard/analytics
settings
page.js/dashboard/settings
profile
page.js/dashboard/settings/profile
services
page.js/services
[id]DYNAMIC
page.js/services/:id
edit
page.js/services/:id/edit
page.js
layout.js
[dynamic]
Generated Routes
| Route | File | Type |
|---|---|---|
/ | page.js | Static |
/dashboard | dashboard/page.js | Static |
/dashboard/analytics | dashboard/analytics/page.js | Static |
/services/:id | services/[id]/page.js | Dynamic |
/services/:id/edit | services/[id]/edit/page.js | Dynamic |
Layout Inheritance
Layout System
app/layout.jsRoot Layout
{ outlet } - Child content renders here
home/page.jsPage
Page content renders directly in root layout
Layout Component Pattern
// app/layout.js
export const component = ({ outlet }) => {
return div({ class: 'app-layout' },
Header(), // Always shown
Sidebar(), // Always shown
main(
outlet // Child pages/layouts render here
),
Footer() // Always shown
);
};Component Lifecycle
Lifecycle Hooks
postMount
Runs after component is added to DOM
component.postMount = () => {
initializeMap();
startWebSocket();
fetchData();
};preUnmount
Runs before component is removed from DOM
component.preUnmount = () => {
clearInterval(timer);
closeWebSocket();
saveState();
};Dynamic Route Params
Access route parameters in component
// services/[id]/page.js
export const component = ({ params }) => {
const serviceId = params.id;
// Use serviceId to fetch data
return ServiceDetails({ id: serviceId });
};Comparison with Other Routers
| Feature | Our Router | Next.js | React Router |
|---|---|---|---|
| File-based routing | ✓ | ✓ | ✗ |
| Zero configuration | ✓ | ✗ | ✗ |
| Bundle size | <5KB | ~80KB | ~40KB |
| Layout nesting | ✓ | ✓ | Manual |
| Dynamic routes | ✓ | ✓ | ✓ |
Continue Learning
Explore more framework features