react-declarative-router

react-declarative-router

A declarative, scope-based router. Because your router shouldn't be monolithic. Built using TypeScript, so whether you're using TS or not, you should be comfortable.

Currently targets ES5 and expects a Promise polyfill. For now, ramda and reselect are also used, but only a small portion of each library is actually needed, despite the full library being imported.

Installation

npm install react-declarative-router

Quick and Simple

When everything is just JavaScript, we don't need to make everything TSX. That said,

import { RouterOutlet, RouteRenderer } from "react-declarative-router";

static routes = {
    "": RouteRenderer(() => <div>Hello world!</div>),
    "about": RouteRenderer(() => <div>Hello world, again!</div>),
    "hello/:user": RouteRenderer(({user}) => <div>Hello {user}!</div>),
};

const Application = () =>
    <RouterOutlet routes={routes} />

By default, uses a window url and history api to determine routes.

But wait! You said it wasn't monolithic!

That's right, it's not. Just add another <RouterOutlet /> with more states where you want the new switch to happen. Note that no states start with a /: you can nest RouterOutlets as deeply as your app requires, and no component needs to know where it exists in the hierarchy.

Configuration

You can set up different URL strategies by updating the configuration. For example, to avoid needing a history fallback and use a hash locator:

import { Configuration } from "react-declarative-router";
import { WindowHashStragety } from "react-declarative-router/dist/strategies/window-hash";

Configuration.defaultLocationStrategy = WindowHashStragety;

Code Splitting

Yes, it is supported, via the RoutePromiseFactory.

static routes = {
    "complex" => RoutePromiseFactory(() => import("./complex"), ({ ComplexComponent }) => <ComplexComponent />)
};

The RouterOutlet will display its children while the code-split region is being loaded, so you won't have a blank screen!

Creating Navigation

You can add links using the <RouterLink /> component, which support an active and inactive state. We don't have a good example at the moment, but you can check out our tests.

Doing fancier things

The RouterOutlet passes through all additional properties to the route renderers, so you can pass in properties the traditional way, too!

The route state is exposed via the @RouteAware directive. We don't have a good example at the moment, but you can check out our tests.