# lumbridge-router

> Improved logic management for React apps.

Latest version **0.1.3** (published 2018-12-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install lumbridge-router
pnpm add lumbridge-router
yarn add lumbridge-router
bun add lumbridge-router
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2018-12-18 |
| First published | 2018-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 26.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Jack R. Scott |
| Maintainers | jackrobertscott |

## Links

- npm: https://www.npmjs.com/package/lumbridge-router
- npm.io page: https://npm.io/package/lumbridge-router

## Dependencies (7)

- [react](https://npm.io/package/react.md) ^16.6.3
- [history](https://npm.io/package/history.md) ^4.7.2
- [@types/react](https://npm.io/package/@types/react.md) ^16.7.7
- [@types/history](https://npm.io/package/@types/history.md) ^4.7.2
- [lumbridge-core](https://npm.io/package/lumbridge-core.md) ^0.1.3
- [path-to-regexp](https://npm.io/package/path-to-regexp.md) ^2.4.0
- [@types/path-to-regexp](https://npm.io/package/@types/path-to-regexp.md) ^1.7.0

## Recent versions

- 0.1.3 (latest) — 2018-12-18
- 0.1.2 — 2018-12-06
- 0.1.1 — 2018-12-01
- 0.1.0 — 2018-11-30
- 0.0.4 — 2018-11-29
- 0.0.3 — 2018-11-29
- 0.0.2 — 2018-11-29

## README

# lumbridge-router

> 🏰 React application management made simple.

[![npm](https://img.shields.io/npm/v/lumbridge.svg)](https://www.npmjs.com/package/lumbridge) ![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg) [![react](https://img.shields.io/badge/framework-react-blue.svg)](https://github.com/facebook/react)

## Installation

Using [npm](https://www.npmjs.com/package/lumbridge-router):

```shell
npm i --save lumbridge-router
```

Using yarn:

```shell
yarn add lumbridge-router
```

Then import the helper classes where needed.

```js
import { Router } from 'lumbridge-router';

const router = Router.create({
  // code...
});
```

## API

### Config

Each router is configured with a `config` object:

```js
const config = {
  // options...
};

const router = Router.create(config);
```

This config object will contain all the information required by the router.

#### `config.routes`

- Type: `object`
- Required: `true`

A collection of routes which may be rendered by the router relative to the app's url.

```js
const router = Router.create({
  routes: {
    // routes...
  },
});
```

Example:

```js
const router = Router.create({
  routes: {
    home: {
      path: '/',
      exact: true,
      component: HomePage,
    },
    dashboard: {
      path: '/dashboard'
      component: Dashboard,
      enter: {
        before: () => userIsLoggedIn(),
      },
      leave: {
        after: () => sendGoodbyeMessage(),
      },
    },
  },
});
```

Properties:

- `routes[routeName].path` [string]: the path which will be checked against the url.
- `routes[routeName].component` [node]: a React component which will be shown when this route is rendered.
- `routes[routeName].exact` [node]: specifies that this route must match exactly to the url.
- `routes[routeName].enter.before` [func]: handler called before the route is rendered. Returning false to this will stop the route rendering and is a good place to put route guards.
- `routes[routeName].enter.after` [func]: handler called after the route has been rendered.
- `routes[routeName].leave.before` [func]: handler called before the route is rendered. Returning false to this will stop the route from changing.
- `routes[routeName].leave.after` [func]: handler called after the route has been rendered.

Troubleshooting:

- Only one route will be shown at a time for a single router (but you may use multiple routers).
- The route with a `path` most similar to the actual route will be rendered.
- Routes with the `exact` key will be matched only when the location exactly matches the `path` key.
- Each route has a key (e.g. `config.routes.home`) which may be used to identify the route.

#### `config.change`

- Type: `object`
- Required: `false`

A collection of handlers which will be called when the router renders a new route.

```js
const router = Router.create({
  change: {
    // handlers...
  },
  routes: {
    // code...
  },
});
```

Example:

```js
const router = Router.create({
  change: {
    before: () => console.log('The route is about to change.'),
    after: () => console.log('The route has changed.'),
  },
  routes: {
    // code...
  },
});
```

Properties:

- `change.before` [func]: handler called before the route changes. Returning false to this will prevent the route from changing.
- `change.after` [func]: handler called after rendering a route.

#### `config.nomatch`

- Type: `object`
- Required: `false`

These values are used when *no* routes are matched by the routes.

```js
const router = Router.create({
  nomatch: {
    // redirect...
  },
  routes: {
    // code...
  },
});
```

Example:

```js
const router = Router.create({
  nomatch: {
    redirect: '/not-found',
  },
  routes: {
    // code...
  },
});
```

Properties:

- `nomatch.redirect` [node]: the url which the app will redirect to when no route matches found.

### Usage

#### `router.compile`

- Type: `node` (React component)

A React component which is used to display the routes in the DOM.

```js
const router = Router.create({
  routes: {
    // code...
  },
});

const Routes = router.compile();

const App = () => (
  <div>
    <h1>My Cool App</h1>
    <div>
      <Routes />
    </div>
  </div>
);
```

#### `Link`

- Type: `node` (React component)

A React component which let's you link to your routes.

```js
import { Link } from 'lumbridge'; // or 'lumbridge-router'

const Menu = () => (
  <Wrap>
    <Link to="/">Home</Link>
    <Link to="/faq">FAQ</Link>
    <Link to="/about">About</Link>
  </Wrap>
);
```

### Nested Routes

The router does not provide functionality for nested routes.

> ✋ Hold up! How could this be?...

We made this decision on *purpose* to avoid unnecessary complexity. If you would like to use nested routes, simply create multiple route components and put those routes inside the components rendered by other routers.

Example:

```js
const ChildRoutes = Router.create({
  routes: {
    nested: {
      path: '/main/nested',
      component: NestedComponent,
    },
  },
}).compile();

const NestedComponent = () => (
  <InnerWrap>
    <ChildRoutes />
  </InnerWrap>
);

const ParentRoutes = Router.create({
  routes: {
    nested: {
      path: '/main',
      component: NestedComponent,
    },
  },
}).compile();

const App = () => (
  <OuterWrap>
    <ParentRoutes />
  </OuterWrap>
);
```

## Packages

- [lumbridge](https://github.com/jackrobertscott/lumbridge/tree/master/packages/lumbridge)
- [lumbridge-persistor](https://github.com/jackrobertscott/lumbridge/tree/master/packages/lumbridge-persistor)
- [lumbridge-router](https://github.com/jackrobertscott/lumbridge/tree/master/packages/lumbridge-router)
- [lumbridge-store](https://github.com/jackrobertscott/lumbridge/tree/master/packages/lumbridge-store)

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