@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>
)