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** |
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>