Minimal migration
Three changes, not a rewrite.
Keep your pages. Keep your links. Choose the content region, declare the route URLs, and add one small routing layer.
Step 1
Keep the links that already work
Add one opt-in attribute. The original href remains the link destination and the fallback when JavaScript is unavailable.
<nav>
<a href="/" aura-router-link>Home</a>
<a href="/about/" aura-router-link>About</a>
</nav>Step 2
Point Aura at your content
extract is the handshake: it tells Aura what to take from the next HTML page – and, on a flat initial route, what to reuse from the first one.
<main id="content">
<h1>The host served this HTML</h1>
</main>
<aura-outlet></aura-outlet>
<aura-router extract="#content">
<aura-route path="/" view="/"></aura-route>
<aura-route path="/about/" view="/about/"></aura-route>
</aura-router>Step 3
Start Aura once
Aura runs in the browser. Your static host or backend keeps serving the same complete HTML pages.
import { AuraRouter } from '@auraui/router';
AuraRouter.install();Going nested?
Add the matching layout shell
Nested layouts also need the parent layout, child outlet, and aura-router-ssr marker in the HTML returned for a direct URL.