minimal-react-router
minimal-react-router
is a lightweight router for React with a small API.
Uses React hooks and requires a peer dependency of react >=16.8.0
.
Installation
npm install minimal-react-router
Example
; const router = ;const routes = ComponentOne ComponentTwo; { // Routes are resolved async so the inital value is undefined. // Set a default value for the placeholder. const Component = Spinner = router; return <Component />;}
API
createRouter
router =
Creates a router instance.
@param urlHistory
History object. Implements pushState and replaceState methods.@param initialURL
Initial URL string.@returns router
router.useRoutes
= router.useRoutesroutes
A custom React hook that takes a routes
object and returns a result of the matching route.
@param routes
An object describing the routes.@returns [result, { parameters, path }]
router.push
router
Navigates to a new path and calls urlHistory.pushState
internally.
Returns a promise that resolves when all currently loaded routes are resolved.
router.replace
router
Replaces the current path and calls urlHistory.replaceState
internally.
Returns a promise that resolves when all currently loaded routes are resolved.
Objects
Routes object
An object describing the routes.
const routes = ComponentOne ComponentTwo;
- Route paths must match absolute paths:
Component
- Route paths cannot contain "?" or "#":
Component // Error!
- If you need to use query params or hashes, use path:
{ // do something with path.searchParams or path.hash}
- Route paths can capture path parts:
{ // path: "/foo/bar/baz" = parameters: ["bar", "baz"]}
- Route paths support wildcards and match from top down:
FooSomething FooEverythingElse
- Resolvers can be sync or async:
"/home": async await ? UserHome : Home
- Resolvers can redirect:
- Resolvers have access to the path and params that were used to match:
{ path // "/foo/some/thing?q=1#hash" parameters // ["some", "thing"]}
PathURL object
A path object similar to URL but only deals with paths, query parameters, and hashes.
Example: