Skip to content

# 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.

NPMPNPMYarnBun
bash

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

bash

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

bash

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

bash

    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.

javascript

    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.

javascript

    _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.

1. Match: It filters your route array to find the best fit.
2. 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.
3. 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.

javascript

    // 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')
        }
      ]
    })