Navigation Plugin: `Router`

The SigPro Router handles URL changes via hashes (#) and maps them to components. It supports dynamic parameters (like :id) and asynchronous loading for heavy pages.

1. Core Features

Hash-based: Works everywhere without special server configuration.
Lazy Loading: Pages are only downloaded when the user visits the route.
Reactive: The view updates automatically when the hash changes.
Dynamic Routes: Supports paths like /user/:id.

2. Installation

The Router is usually included in the official plugins package.

::: code-group

npm install -D tailwindcss @tailwindcss/vite daisyui@next

pnpm add -D tailwindcss @tailwindcss/vite daisyui@next

yarn add -D tailwindcss @tailwindcss/vite daisyui@next

bun add -d tailwindcss @tailwindcss/vite daisyui@next

:::

3. Setting Up Routes

In your App.js (or a dedicated routes file), define your navigation map.

const routes = [
  { path: '/', component: () => h1("Home Page") },
  { 
    path: '/admin', 
    // Lazy Loading: This file is only fetched when needed
    component: () => import('./pages/Admin.js') 
  },
  { path: '/user/:id', component: (params) => h2(`User ID: ${params.id}`) },
  { path: '*', component: () => div("404 - Page Not Found") }
];

export default () => div([
  _navbar({ title: "My App" }),
  _router(routes) // The router is now a global tag
]);

4. Navigation (`_router.go`)

To move between pages programmatically (e.g., inside an onclick event), use the global _router.go helper.

_button({ 
  onclick: () => _router.go('/admin') 
}, "Go to Admin")

5. How it Works (Under the Hood)

The router tracks the window.location.hash and uses a reactive signal to trigger a re-render of the specific area where _router(routes) is placed.

Match: It filters your route array to find the best fit.
Resolve: * If it's a standard function, it executes it immediately.
- If it's a Promise (via import()), it shows a loading state and swaps the content once the module arrives.
Inject: It replaces the previous DOM node with the new page content surgically.

6. Integration with UI Components

Since you are using the UI Plugin, you can easily create active states in your navigation menus by checking the current hash.

// Example of a reactive sidebar menu
_menu({
  items: [
    { 
      label: 'Dashboard', 
      active: () => window.location.hash === '#/', 
      onclick: () => _router.go('/') 
    },
    { 
      label: 'Settings', 
      active: () => window.location.hash === '#/settings', 
      onclick: () => _router.go('/settings') 
    }
  ]
})

2.7 KiB Raw Blame History

Navigation Plugin: Router