page-path

Page path builder

Installation:

npm install page-path

Usage

1. Define path interface

interface BookPath {
    name: string;
    page?: number;
}

2. Create page path

const bookPagePath = new PagePath<BookPath>('/book', {
    path: ['name'],
    query: ['page'],
});

3. Build path

const path = bookPagePath.build({ name: 'alphabet', page: 7 });
// path: "/book/alphabet?page=7"

constructor

    // PagePath class
    constructor(root: string, options: PagePathOptions);

Parameters: root - root path.

options: path's options. See PagePathOptions

build(params: any): string

Parameters: params - costom defined params values.

Returns built URL based on passed parameters.

PagePathOptions

PagePath class constructor receives string or PagePathOptions interface. string type represents root value.

Name	Required	Type	Description	Example
path	No	string or Array<string>	Subdirectories names	/book/alphabet?page=7
query	No	string or Array<string>	Queries names	/book/alphabet?page=7
ending	No	string	root path's ending. Use case example: nextjs static pages	/book**.html**

Using in react-router-dom

Define interface

export interface BookPath {
    name: string;
}

Define container

import { PagePath } from 'page-path';

export const AppPaths = {
    index: new PagePath('/'),
    contact: new PagePath('/contact'),
    book: new PagePath<BookPath>('/book/:name'),
};

Define routes

import { Switch, Route } from 'react-router-dom';
...
<Switch>
    <Route
        exact={true}
        path={AppPaths.index.routePath}
        component={IndexPage}
    />
    <Route
        exact={true}
        path={AppPaths.contact.routePath}
        component={ContactPage}
    />
    <Route
        exact={true}
        path={AppPaths.book.routePath}
        component={BookPage}
    />
    ...
</Switch>

Define achors

<a href={AppPaths.index.build()}>Home</a>
// => <a href="/">Home</a>
<a href={AppPaths.contact.build()}>Contact</a>
// => <a href="/contact">Contact</a>
<a href={AppPaths.book.build({ name: 'alphabet' })}>Alphabet</a>
// => <a href="/book/alphabet">Alphabet</a>

Using in next or gatsby

Define interface

export interface BookPath {
    name: string;
    page?: number;
}

Define container

import { PagePath } from 'page-path';

export const AppPaths = {
    book: new PagePath<BookPath>('/book/', {
        path: ['name'],
        query: ['page'],
    }),
};

Define achors

<a href={AppPaths.book.build({ name: 'alphabet', page: 1 })}>Alphabet</a>
// => <a href="/book/alphabet?page=1">Alphabet</a>
<a href={AppPaths.book.build({ name: 'geography', page: 2 })}>Geography</a>
// => <a href="/book/geography?page=2">Geography</a>