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.
npm install react-declarative-router
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.
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.
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;
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!
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.
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.