# react-declarative-router

> A declarative, scope-based router, because your router shouldn't be monolithic

Latest version **0.1.0** (published 2017-06-29) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-declarative-router
pnpm add react-declarative-router
yarn add react-declarative-router
bun add react-declarative-router
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-06-29 |
| First published | 2017-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Matthew DeKrey |
| Maintainers | mdekrey |
| Keywords | react, router |

## Links

- npm: https://www.npmjs.com/package/react-declarative-router
- Repository: https://github.com/mdekrey/react-declarative-router
- Homepage: https://github.com/mdekrey/react-declarative-router#readme
- Issues: https://github.com/mdekrey/react-declarative-router/issues
- npm.io page: https://npm.io/package/react-declarative-router

## Dependencies (2)

- [ramda](https://npm.io/package/ramda.md) 0.23.0
- [reselect](https://npm.io/package/reselect.md) 2.5.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2017-06-29
- 0.0.3 — 2017-04-23
- 0.0.2 — 2017-04-18
- 0.0.2-ramda-lite — 2017-04-18
- 0.0.2-es5 — 2017-04-18
- 0.0.1 — 2017-04-18
- 0.0.1-basics.3 — 2017-04-17
- 0.0.1-basics.2 — 2017-04-17
- 0.0.1-basics — 2017-04-17

## README

# 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](./src/router-link.test.tsx).

## 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](./src/decorator.test.tsx).

---
_Source: https://npm.io/package/react-declarative-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._