Advanced Router Features

Keep-Alive (Route Memory Pool)

Routes with keepAlive: true stay mounted when navigating away. The router maintains a configurable pool:

const router = mesh.router(routes, {
  keepAlive: { maxRoutes: 5, evictionStrategy: "lru" }
});

// In the route definition
{ path: "/orders/new", component: OrderForm, keepAlive: true }

When the user navigates back to /orders/new, the form is instantly visible with all values preserved.

Keep-Alive Options

Option	Default	Description
maxRoutes	5	Maximum alive routes
evictionStrategy	"lru"	"lru" or "fifo"
maxAge	—	Max time a route stays alive (ms)

Predictive Prefetch

The router learns navigation patterns and speculatively prefetches likely next routes:

const router = mesh.router(routes, {
  predictivePrefetch: {
    enabled: true,
    topN: 2,
    minProbability: 0.3
  }
});

After visiting /products → /products/:id three times, the fourth visit prefetches the detail route automatically.

Shared Element Transitions

Animate elements between routes using FLIP:

// Product list
<Link to="/products/:id" params={{ id: product.id }}>
  <SharedElement id={`product-image-${product.id}`}>
    <img src={product.image} />
  </SharedElement>
</Link>

// Product detail
<SharedElement id={`product-image-${product.id}`}>
  <img src={product.image} className="hero" />
</SharedElement>

Automatic Route Analytics

Zero-config page view tracking:

const router = mesh.router(routes, {
  analytics: {
    enabled: true,
    trackPageViews: true,
    trackTimeOnPage: true,
    trackScrollDepth: true,
    onEvent: (event) => analytics.track(event.name, event.properties)
  }
});

Events emitted: route.page_view, route.time_on_page, route.scroll_depth, route.navigation, route.bounce.

Next Steps

• SEO & Meta — Document meta management
• Routes — Route definitions