lumbridge-router

🏰 React application management made simple.

Installation

Using npm:

npm i --save lumbridge-router

Using yarn:

yarn add lumbridge-router

Then import the helper classes where needed.

import { Router } from 'lumbridge-router';

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

API

Config

Each router is configured with a config object:

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.

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

Example:

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.

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

Example:

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.

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

Example:

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.

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.

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:

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
• lumbridge-persistor
• lumbridge-router
• lumbridge-store