scouter
800 byte framework agnostic universal router.
Features
scouter
is an attempt to take the magic out of routing front-end applications. Specifically, React. It's Not Components™, and hopefully that's a good thing.
- Data first
- Async-by-default
- Nestable
- Middleware
- Universal, works in Node
scouter
can be used with most UI building libraries, but the examples below will use React.
Install
npm i scouter --save
Usage
const app = app
Defining routes
Routes accept an object as their only parameter. The route object can contain the following properties:
path
- a path representing the route, including named parameters (required)component
- a component to be returned when the route is matched (required)load
- called when route matches, useful for loading data, can return aPromise
- any returned data will be passed to child-route
load
functions and output fromrouter.resolve()
- any returned data will be passed to child-route
options
- an object with extra data and parameters- not used internally (at the moment), but can be useful to library users
const path = '/' const component = <h1>Home page</h1> const load = { return { }} const options = pageTitle: 'Home' path component load options
Asynchronous routes
When a load
handler is defined on a route, scouter
will wait to resolve the route until the routes's load
function resolves. During this time, the developer can show a loading animation or what-have-you.
Named route parameters are passed to the load
function on the context
object.
const path = '/posts/:slug' const component = <h1>postslug</h1> const load = { return } path component load
Nested routes
Routes can be nested by passing a route to the function returned from the parent route. Nested routes build on the routes of their parents.
This means that certain generic routes can be reused in different locations. The code below results in four separate routes: /about
, /about/:slug
, /posts
, and /posts/:slug
.
const About = const Posts = const Lightbox =
Nested loading
Nested routes will wait for their parent's load
functions to resolve before calling their own. This is useful for cases where child routes depend on data from their parents.
const About = const AboutMember = const app = app
Middleware
scouter
implements very simple middleware. Middleware are applied for the route scope in which they are defined, and all nested scopes.
Below, middleware1
will be called when the /
route resolves. When the /posts/:slug
route resolves, both middleware1
and middleware2
will be called.
const middleware1 = const middleware2 = middleware1 Home
Using context
You can optionally pass an initial context
object when calling router.resolve()
. This is useful when dealing with API keys, authorization tokens, etc.
router
The context
object is passed to all load
functions, as well as any middleware you've defined along the way.
const About =
Server Side Rendering
const app = const renderToString = app app
Recipes TODO
document.title
usingoptions.title
utility- Incremental rendering using
picostate
- Redirect example
MIT