Natural Polyglot Machine

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

    2.1.1 • Public • Published

    @uxf/router

    Installation

    yarn add @uxf/router
    

    or

    npm install @uxf/router --save
    
    • Create routes directory
    • Create routes.ts and index.ts inside routes directory:
    // routes/routes.ts
    import { Router as UxfRouter } from "@uxf/router";
    
    export interface RouteList {
        index: null;
        "blog": null;
        "blog-article": { articleId: string };
    }
    
    export const router = new UxfRouter<RouteList>({
        index: "/",
        "blog": "/blog",
        "blog-article": "/blog/[articleId]",
    });
    // routes/index.ts
    import { RouteList, router } from "./routes";
    import { PropsGenerator, FunctionParametersGenerator, UxfNextPage } from "@uxf/router";
    
    export const Link = router.getLink();
    export const useRouter = router.getUseRouter();
    export const Router = router.getSingletonRouter();
    
    export type RouteProps = PropsGenerator<RouteList>;
    export type RouteParams = FunctionParametersGenerator<RouteList>;
    export type NextPage<Route extends keyof RouteList, IP = Record<string, any>, P = IP> = UxfNextPage<RouteList, Route, IP, P>;

    Add configuration to tsconfig.json

    {
      "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
          "@app-routes": [
            "routes"
          ]
        }
      }
    }

    Typings

    Function

    import { RouteList } from "@app-routes";
    import { FunctionParametersGenerator } from "@uxf/router";
    
    const navigate: (...attrs: FunctionParametersGenerator<RouteList>) => void = (route, params = undefined) => {
        // implement me
    }

    Component

    import { RouteList } from "@app-routes";
    import { PropsGenerator } from "@uxf/router";
    
    const SomeComponent: React.FC<PropsGenerator<RouteList>> = (props) => {
        // implement me
    }

    How to use Link?

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

    Keywords

    none

    Install

    npm i @uxf/router

    DownloadsWeekly Downloads

    110

    Version

    2.1.1

    License

    ISC

    Unpacked Size

    18.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • uxf