route

A reactive signal containing current route information including path, parameters, query, and handler.

API

function route(): RouteInfo

interface RouteInfo {
  path: string;
  params: Record<string, string>;
  query: Record<string, string>;
  handler: RouteHandler | null;
}

TypeScript

The route signal is strongly typed, providing autocomplete for its properties.

import { route, type RouteInfo } from '@hellajs/router';

const currentRoute: RouteInfo = route();

Basic Usage

Access the route signal inside a reactive context to get the current path, parameters, and query string.

import { effect } from '@hellajs/core';
import { route } from '@hellajs/router';

effect(() => {
  const { path, params, query } = route();
  
  console.log(`Current path: ${path}`);
  
  if (params.id) {
    console.log(`User ID from params: ${params.id}`);
  }
  
  if (query.sort) {
    console.log(`Sort order from query: ${query.sort}`);
  }
});

Key Concepts

Reactive Signal

route() is a reactive signal that automatically updates when the current route changes, triggering any dependent computations or effects.

const currentRoute = route();
effect(() => {
  console.log('Route changed to:', currentRoute.path);
  // This runs automatically when navigation occurs
});

Route Information

Provides comprehensive route data including the current path, extracted parameters from route patterns, and parsed query string values. Parameters automatically include inheritance from parent routes in nested structures.

// For URL: /users/123?sort=name&page=2 (flat route)
const { path, params, query } = route();
// path: "/users/123?sort=name&page=2"
// params: { id: "123" }  
// query: { sort: "name", page: "2" }

// For URL: /admin/users/123/edit (nested route with inheritance)
// Router config: /admin -> /users -> /:id -> /edit
const { path, params, query } = route();
// path: "/admin/users/123/edit"
// params: { id: "123" } (inherited from parent route)
// query: {}

Handler Reference

Contains a reference to the active route handler function, useful for dynamic route behavior.

effect(() => {
  const { handler } = route();
  if (handler) {
    // Execute route-specific logic
    handler();
  }
});

Important Considerations

Performance Impact

Accessing route() in frequently updating contexts can cause unnecessary re-renders.

// ❌ May cause excessive updates
effect(() => {
  console.log('Route changed:', route().path);
  // Other operations...
});
// ✅ Use computed for derived values
const currentPath = computed(() => route().path);

Route Parsing

Parameters and query values are always strings - cast to other types as needed.

// ✅ Cast values as needed
const { params, query } = route();
const userId = parseInt(params.id);
const page = parseInt(query.page) || 1;

Handler Timing

The handler property may be null during route transitions.

// ✅ Check handler exists
effect(() => {
  const { handler } = route();
  if (handler) {
    handler();
  }
});