page-path
Page path builder
Installation:
npm install page-path
Usage
- Define path interface
interface BookPath {
name: string;
page?: number;
}
- Create page path
const bookPagePath = new PagePath<BookPath>('/book', {
path: ['name'],
query: ['page'],
});
- 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** |
react-router-dom
Using in 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>
next
or gatsby
Using in 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>