react-declarative-router v0.1.0
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 RouterOutlet
s 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.
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago