Name: winnetoujs-router
Rating: 62
Author: cedrosdev

RULES:

•import: import { Router } from "winnetoujs/modules/router"
•define router class with methods and routes
•each route: go() + set()
•go() calls Router.navigate(path)
•set() registers this.routes[path] = () => { ... }
•call Router.createRoutes(routes, { onGo, onBack })
•create ONE router instance

BASIC ROUTER:

import { Router } from "winnetoujs/modules/router";

export class AppRouter {
  private routes = {};

  public methods = {
    home: {
      go: () => Router.navigate("/"),
      set: () => {
        this.routes["/"] = () => {
          console.log("home");
        };
      },
    },
  };

  constructor() {
    Object.keys(this.methods).forEach((k) => this.methods[k].set());
    Router.createRoutes(this.routes, {
      onGo: (route) => console.log("go", route),
      onBack: (route) => console.log("back", route),
    });
  }
}

USE IN APP:

import { W } from "winnetoujs";
import { $navBtn } from "./nav.wcto";
import { AppRouter } from "./router";

const router = new AppRouter();

new $navBtn({
  text: "Home",
  onclick: W.fx(() => router.methods.home.go()),
}).create("#nav");

RENDER PAGES:

this.routes["/about"] = () => {
  new $aboutPage().create("#content", { clear: true });
};

DYNAMIC ROUTE:

this.routes["/blog/:id"] = (postId) => {
  loadPost(postId);
};

BEST PRACTICES:

•keep route logic inside router
•use { clear: true } when swapping pages
•lazy load heavy pages
•guard routes before Router.navigate

TROUBLESHOOT:

•route not firing: call router.methods.x.go()
•back button not working: ensure Router.createRoutes() called
•route not found: path in go() must match set()