Page Route Component - Router by Before Semicolon

`<page-route>`

The <page-route> component is the main route container. It mounts slotted content, a lazy src file, or a JavaScript-provided component only when the current pathname matches its route pattern.

html
<page-route path="/dashboard">
    <h2>Dashboard View</h2>
</page-route>

Attributes

Attribute	Type	Default	Description
`path`	`string`	`"/"`	The pathname pattern to match (supports parameters like `/:id`).
`exact`	`boolean`	`true`	When `true`, matches the path strictly. When `false`, matches paths starting with the pattern.
`src`	`string`	`undefined`	Relative path to an HTML, text, or JavaScript module file to lazy load.
`title`	`string`	`undefined`	Updates the document title when this route becomes active.
`name`	`string`	`undefined`	Mutually exclusive route group identifier (similar to a Switch statement).

Dynamic Parameters

Use a colon : to define path parameters. You can retrieve these values in nested HTML via <page-data> or in JavaScript:

html
<page-route path="/users/:userId">
    <h2>User ID: <page-data param="userId"></page-data></h2>
</page-route>

Nested Layouts

Set exact="false" on a parent route that should stay active while child routes match. Child path values are appended to the closest parent route path.

html
<page-route path="/teams/:teamId" exact="false">
    <h1>Team <page-data param="teamId">unknown</page-data></h1>

    <nav>
        <page-link path="$/members">Members</page-link>
        <page-link path="$/settings">Settings</page-link>
    </nav>

    <page-route path="/members" src="./teams/members.html"></page-route>
    <page-route path="/settings" src="./teams/settings.js"></page-route>
</page-route>

Switch-Like Grouping (`name`)

To ensure only one route in a group renders at a time (preventing overlapping matches), assign them the same name attribute. The router will evaluate them in order and mount only the first match:

html
<!-- Mutually exclusive routing -->
<page-route name="view-group" path="/users/new">
    <h2>Create New User</h2>
</page-route>

<page-route name="view-group" path="/users/:userId">
    <h2>User Profile</h2>
</page-route>

Lazy Loading (`src`)

Instead of embedding all views in the main document, load them on-demand by specifying a file in the src attribute.

You can define a loading state and a fallback UI (shown if the request fails) using the loading and fallback slots:

html
<page-route path="/about" src="./pages/about-page.html">
    <div slot="loading">Loading page template...</div>
    <div slot="fallback">Oops! Failed to load page.</div>
</page-route>

Supported Lazy-Loaded Formats

When loading a JavaScript file, the module must default-export one of the following:

A plain HTML/text string.
A native DOM Node (e.g. Element, DocumentFragment).
An HtmlTemplate generated by the Markup html tagged literal.
A function that receives (locationState, pathParams, searchParams) and returns any of the above.

javascript
// ./pages/user-details.js
const { html } = BFS.MARKUP

export default (data, params, query) => html`
    <h2>User Profile: ${params.userId}</h2>
    <p>Role: ${data.role}</p>
    <p>Tab: ${query.tab || 'overview'}</p>
`

Caching and Lifecycle

To prevent memory leaks and optimize performance:

Inactive routes receive the hidden attribute.
When a loaded route becomes inactive, the engine detaches the DOM tree and caches it in memory.
If the route matches again, the cached DOM tree is re-inserted without repeating calculations or requests.

edit this doc