React Router R
This library provides a declarative DSL for constructing React Router routes.
It exposes a function R
, which takes:
-
1 - a path
-
2 - a component
-
(3...n) - optional route transformers, i.e. functions of type
Route → Route
and returns a valid Route, aka a React Router plain route.
React Router R is designed for optimal readability in Coffeescript, so documentation and examples are in Coffeescript.
Example:
require 'react-router-r' ... routes = R "/"App index Landing child R "welcome"Landing child R "about"About index AboutAll child R "foo"AboutFoo child R "bar"AboutBar
reduces to:
const routes = path: "/" component: App indexRoute: component: Landing childRoutes: path: "welcome" component: Landing path: "about" component: Landing indexRoute: component: AboutAll childRoutes: path: "foo" component: AboutFoo path: "bar" component: AboutBar
See ./example for the whole application.
Installation:
yarn add react-router-r
Basics:
Build a route:
R '/'App
reduces to:
path: "/" component: App
Build a route with child routes:
R '/'App index Landing child R 'welcome'Landing child R 'about, About
reduces to:
path: "/" component: App indexRoute: component: Landing childRoutes: path: 'welcome' component: Landing path: 'about' component: About
Route Transformers:
React Router R takes and applies functions that take a React Route (as a plain route object) and returns a React Route. We call these functions route transformers. Note these transformers may mutate and return their input.
The following transformers are provided out of the box:
index
index : (component : Component) → (route : Route) → Route
Adds an indexRoute
with the specified component to the route.
child
child : (childRoute : Route) → (route : Route) → Route
Adds a child route to the route.
dynamic
dynamic : ({
path? : String,
component? : Component,
getRoute : (∀b. (returnRoute : ((route : Route) → b)) → b)
}) → (route : Route) → Route
Adds a child route with the optionally provided path
and component
with a dynamically generated grandchild route. Uses React Router's getIndexRoute
and getChildRoutes
under the hood.
dynamic
can be used as is, but is more meant to be further abstracted upon for building application-specific dynamic route transformers. It serves as a mid-level API on top of the default low-level React Router dynamic routing API.
Write your own transfomers!
Writing route transformers is easy!
For example, let's write one that adds basic support for React Router's onEnter
field:
= if 'onEnter' in route throw "onEnter is already defined!" route.onEnter = onEnterCallback route
Now, we can use it in our routes:
R '/'App onEnter ...
reduces to:
path: "/" component: App { ... }