Getting Started with Router#

Prerequisites

Before continuing, make sure you're familiar with: SignalX Core basics, Components

The SignalX Router provides declarative, type-safe routing for your SignalX applications with full SSR support.

Installation#

Terminal 
pnpm add @sigx/router

Basic Setup#

Create a router instance and define your routes:

TSX 
import { createRouter, RouterView, RouterLink } from '@sigx/router';
import { createApp } from 'sigx';

// Define your routes
const router = createRouter({
    routes: [
        { path: '/', component: Home },
        { path: '/about', component: About },
        { path: '/users/:id', component: UserProfile },
    ],
});

// Create your app with the router plugin
const app = createApp(App);
app.use(router);
app.mount('#app');

Using RouterView#

The RouterView component renders the matched route component:

TSX 
import { component } from 'sigx';
import { RouterView, RouterLink } from '@sigx/router';

const App = component(() => {
    return () => (
        <div>
            <nav>
                <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink>
            </nav>
            
            <main>
                <RouterView />
            </main>
        </div>
    );
});

Use RouterLink for navigation instead of regular anchor tags:

TSX 
<RouterLink to="/users/123">View User</RouterLink>

{/* With active class */}
<RouterLink 
    to="/about" 
    activeClass="text-primary font-bold"
>
    About
</RouterLink>

Next Steps#