@uxf/router
    TypeScript icon, indicating that this package has built-in type declarations

    1.7.1 • Public • Published

    @uxf/router

    How to use

    Install:

    yarn add @uxf/router
    

    Create routes.ts inside your project:

    import { Router as UxfRouter } from "@uxf/router";
    
    export interface RouteList {
        index: null;
        "blog": null;
        "blog-article": { articleId: string };
    }
    
    const router = new UxfRouter<RouteList>({
        index: "/",
        "blog": "/blog",
        "blog-article": "/blog/:articleId",
    });
    
    export const Link = router.getLink();
    export const useRouter = router.getUseRouter();
    export const Router = router.getSingletonRouter();
    export const getRequestHandler = router.getRequestHandler;
    export type RouteName = keyof RouteList;

    On the server

    import next from "next";
    import { getRequestHandler } from "./routes";
    const app = next({ dev: process.env.NODE_ENV !== "production" });
    const handler = getRequestHandler(app);
    
    const { createServer } = require("http");
    app.prepare().then(() => {
        createServer(handler).listen(3000);
    });

    Custom request handler

    import next from "next";
    import { RequestHandler } from "@uxf/router";
    import { getRequestHandler } from "./routes";
    
    const app = next();
    
    const customHandler: RequestHandler = async (req, res, pathname, queryParams) => {
        const html = await app.renderToHTML(req, res, pathname, queryParams);
        
        res.send(html);
    }
    
    const handler = getRequestHandler(app, customHandler);

    On the client

    // pages/index.js
    import { Link } from '../routes'
    
    export default () => (
        <Link route='blog-article' params={{ articleId: 12 }}>
          <a>Hello world</a>
        </Link>
    )

    Anchor

    // pages/index.js
    import { Link, Router } from '../routes'
    
    export default () => (
        <Link route='blog-article' anchor="...">
          <a>Hello world</a>
        </Link>
    )
    
    // or
    
    Router.push('blog-article', null, { anchor: "..." });

    Keywords

    none

    Install

    npm i @uxf/router

    DownloadsWeekly Downloads

    118

    Version

    1.7.1

    License

    ISC

    Unpacked Size

    35.9 kB

    Total Files

    16

    Last publish

    Collaborators

    • uxf