Router Navigation

BareMetal.router methods

BareMetal.router.reload()

Executes a hard reload of the current SPA page by calling window.location.reload(). This is useful when you want to force the browser to wipe the entire SPA state and fetch fresh assets.

Usage Example

// Hard refresh the SPA to discard stale state BareMetal.router.reload();

BareMetal.router.handleRoute()

Forces the router to evaluate the current window.location.pathname, fetch the corresponding HTML, and swap the DOM. Usually called automatically via popstate or link clicks, but can be invoked manually if you change the URL via history.pushState().

Usage Example

// Programmatic navigation without a link click history.pushState({}, "", "/dashboard"); BareMetal.router.handleRoute();

Route Cleanups (onCleanup)

When the router navigates away from a page, it destroys the active modules. You should register cleanup logic to prevent memory leaks across route changes.

Cleanup Example

export function mount({ state, onCleanup }) { // 1. Register cleanups using the hook onCleanup(() => { // cleanup logic here }); // 2. Alternatively, return an explicit destroy function return { destroy: () => { // cleanup logic here } }; }

DOM Swapping & Page-Specific Assets

When the BareMetal Router performs an SPA navigation, it swaps the <body> using innerHTML. This introduces two critical web security/architecture caveats:

Page-Specific Styles (data-baremetal="style")
The router deliberately strips out all <link> and <style> tags from the <head> of the newly fetched page to prevent CSS bloat, unless they include the data-baremetal="style" attribute. If a page has custom CSS, you MUST add this attribute so the router preserves it during navigation.
Page-Specific Scripts (<script src="...">)
Browsers do not execute <script> tags injected via innerHTML. If a page relies on an external script placed in its <body>, it will fail to load during SPA navigation. You must either make the library a global dependency (in the <head> of the initial load), or dynamically inject the script via JS (document.createElement('script')) inside your module's mount() function.