lumbridge-router v0.1.3
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 thepath
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>
);