Examples - routes.js

Basic Dynamic Route

User Profile Example

This demonstrates how to create a route with dynamic parameters like :id or :slug.

const routes = {
  '/': () => console.log('Home page'),
  '/user/:id': (params) => {
    console.log(`User ID: ${params.id} requested.`);
    displayUserProfile(params.id);
  }
};

const router = new Router(routes);
router.init();

404 Route

Catch-all Unknown Route

Define a catch-all route to handle 404s or unknown paths.

const routes = {
  '/': () => console.log('Welcome to routes.js!'),
  '/404': () => {
    console.log('Unknown route, redirect to home or show 404');
    display404();
  }
};

const router = new Router(routes);
router.init();

Advanced Example: Nested Routes

Sub-Route Handling

Create a complex routing structure using nested paths for better organization.

const routes = {
  '/': () => console.log('Home'),
  '/dashboard': () => console.log('Dashboard'),
  '/dashboard/profile': () => console.log('Profile Page'),
  '/dashboard/settings': () => console.log('User Settings'),
  '/dashboard/:id': (params) => {
    console.log(`User ID: ${params.id} on dashboard.`);
  }
};

const router = new Router(routes);
router.init();

Query Parameters

Filter Users List Example

Handle query string parameters like ?filter=active or ?sort=relevance

const routes = {
  '/': () => console.log('Welcome to routes.js!'),
  '/users': (query) => {
    const active = query.get('filter');
    const sort = query.get('sort');
    
    console.log(`Filter: ${active || 'none'}, Sort: ${sort || 'none'}`);
  }
};

const router = new Router(routes);
router.init();