pojo-router
A hook based machanism to convert a string (i.e. a path) into metadata.
API
Define your metadata in a provider component.
import React from 'react';
import PojoRouter from 'pojo-router';
const namedPaths = {
page1: '/page1',
page2: { path: '/page2', sensitive: true },
page3: { path: '/page3/:id' },
};
const routes = [
{ name: 'page1', abc: 123 },
{ name: 'page2', abc: 456 },
{ name: 'page3', abc: 789 },
{ name: '/page4', abc: 0 }
];
const notFound = { nothing: true };
const Router = ({ children }) => (
<PojoRouter namedPaths={namedPaths} routes={routes} notFound={notFound}>
{ children }
</PojoRouter>
);
Controller
type Props = {
namedPaths: Record<string, string | NamedPath>;
routes: readonly Route[];
notFound: AnyIfEmpty<DefaultRoutePojo>;
};
class RouteController {
constructor({ namedPaths, routes, notFound }: Props);
readonly notFound: AnyIfEmpty<DefaultRoutePojo>;
readonly pathBuilders: Record<string, PathFunction>;
getMatchedRoutes(pathToMatch: string): any;
buildPath(pathOrPathName: string, pathData?: object): void;
}
notFound
This is the passed in notFound object.
getMatchedRoutes(pathToMatch)
Gets all routes matching the passed path.
buildPath(pathOrPathName, pathData)
Given a named route (or route string if none is defined), this returns a function that will generate a matching string, including populating the dynamic variables. E.g. for a route like /entity/:id
an outbound routing function like entityPath({ id: 123 })
will generate /entity/123
.
controller.buildPath('entity', { id: 123 })
Hooks
Within your child component, use one of the hooks.
useRoutes()
Given a path, this returns all the metadata for routes that match.
useLocation()
Get current location
useRouter()
Return the RouteController that can be used for computations