JelenJS Router

File-based routing for JelenJS framework, inspired by Next.js routing conventions.

Installation

npm install jelenjs-router

Basic Usage

1. Setup Router Component

import { createApp } from 'jelenjs';
import { Router } from 'jelenjs-router';

function App() {
  return <Router />;
}

createApp(App, '#app');

2. Create Page Components

Create your pages in a pages/ directory:

pages/
├── index.tsx          # / route
├── about.tsx          # /about route
├── blog/
│   ├── index.tsx      # /blog route
│   └── [slug].tsx     # /blog/:slug route
└── users/
    └── [id].tsx       # /users/:id route

3. Page Component Example

// pages/blog/[slug].tsx
import type { PageProps } from 'jelenjs-router';

export default function BlogPost({ params, query, navigate }: PageProps) {
  return (
    <div>
      <h1>Blog Post: {params.slug}</h1>
      <p>Query: {JSON.stringify(query)}</p>
      <button onClick={() => navigate('/blog')}>
        Back to Blog
      </button>
    </div>
  );
}

File-Based Routing Conventions

| File Path | Route | Description | |-----------|-------|-------------| | pages/index.tsx | / | Home page | | pages/about.tsx | /about | Static route | | pages/blog/index.tsx | /blog | Nested static route | | pages/blog/[slug].tsx | /blog/:slug | Dynamic route | | pages/users/[id].tsx | /users/:id | Dynamic route | | pages/[...slug].tsx | /*slug | Catch-all route |

Navigation

Using the Link Component

import { Link } from 'jelenjs-router';

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/blog/my-post">Blog Post</Link>
    </nav>
  );
}

Programmatic Navigation

import { useRouter } from 'jelenjs-router';

function MyComponent() {
  const router = useRouter();

  const handleClick = () => {
    router.navigate('/about');
  };

  return <button onClick={handleClick}>Go to About</button>;
}

Hooks

useParams()

Get current route parameters:

import { useParams } from 'jelenjs-router';

function BlogPost() {
  const params = useParams(); // { slug: "my-post" }
  
  return <h1>Post: {params.slug}</h1>;
}

useQuery()

Get current query parameters:

import { useQuery } from 'jelenjs-router';

function SearchPage() {
  const query = useQuery(); // { q: "search term" }
  
  return <p>Searching for: {query.q}</p>;
}

useRouter()

Get router utilities:

import { useRouter } from 'jelenjs-router';

function MyComponent() {
  const router = useRouter();
  
  return (
    <div>
      <button onClick={() => router.navigate('/home')}>Home</button>
      <button onClick={() => router.back()}>Back</button>
      <button onClick={() => router.forward()}>Forward</button>
    </div>
  );
}

Integration with Vite

When using with jelenjs-vite, the router will automatically discover your page files:

// vite.config.js
import { defineConfig } from 'vite';
import jelenjs from 'jelenjs-vite';

export default defineConfig({
  plugins: [
    jelenjs({
      router: {
        enabled: true,
        pagesDir: 'src/pages'
      }
    })
  ]
});

Manual Route Registration

You can also register routes manually without file-based routing:

import { Router, createRoute } from 'jelenjs-router';

function HomePage() {
  return <div>Home</div>;
}

function AboutPage() {
  return <div>About</div>;
}

function App() {
  const routes = [
    createRoute('/', HomePage),
    createRoute('/about', AboutPage)
  ];

  return <Router routes={routes} />;
}

License

MIT