Route Metadata

You can attach custom metadata (such as page layouts, breadcrumbs, permissions, or access roles) when registering routes.

Metadata is stored by the registered route pattern. Use the same pattern when calling getRouteMeta.

Attaching Metadata

Pass metadata inside the options configuration of registerRoute:

1import { registerRoute } from '@beforesemicolon/router'2 3registerRoute('/admin/:section', {4    exact: true,5    meta: {6        title: 'Admin Console',7        requiresAuth: true,8        allowedRoles: ['admin', 'moderator'],9        breadcrumb: 'Home > Admin > Dashboard',10    },11})

Retrieving Metadata (`getRouteMeta`)

Retrieves the metadata object associated with a registered path pattern.

1function getRouteMeta(pattern: string): RouteMeta | undefined

Example

1import { getRouteMeta } from '@beforesemicolon/router'2 3const meta = getRouteMeta('/admin/:section')4console.log(meta.title) // "Admin Console"5console.log(meta.requiresAuth) // true

Common Use Cases

1. Dynamic Document Titles

Update the browser document title dynamically upon page transitions:

1import { onPage, getRouteMeta } from '@beforesemicolon/router'2 3onPage('/admin/:section', (active) => {4    if (active) {5        const meta = getRouteMeta('/admin/:section')6        document.title = meta?.title7            ? `${meta.title} | My App`8            : 'Admin | My App'9    }10})

2. Guarding Permissions

Check permissions dynamically inside a route guard:

1import { registerRouteGuard, getRouteMeta } from '@beforesemicolon/router'2 3registerRouteGuard('/admin/:section', () => {4    const meta = getRouteMeta('/admin/:section')5 6    if (meta?.requiresAuth && !userIsLoggedIn()) {7        return '/login' // Redirect8    }9 10    if (meta?.allowedRoles && !userHasRoles(meta.allowedRoles)) {11        return '/unauthorized' // Redirect12    }13 14    return true // Allow15})

edit this doc