README
Smart Routes
A framework agnostic simple and lightweight way to create and reuse routes on web apps.
IMPORTANT: This isn't a router like vue-router
or react-router
. Smart Routes just brings a simplified and safer way to declare and reuse routes.
Motivation
As our web application grow, its amount of routes grows too. Apps with 20, 30, 40 and more routes variations can be really messy to deal with, even more when we add dynamic routing.
That kind of thing came with some problems like:
- Links leading to unexpected route;
- Send parameter to a not parameterized route;
- Non intelligible routes names;
- Work around to apply parameters;
- Forget to replace a link when an entirely route needs to be changed.
A routes single source of truth allows to better organize your routes, better use them and prevent routing mistakes.
Install
npm
npm install smart-routes
yarn
yarn add smart-routes
Basic usage
Import Route
from the package
import { Route } from 'smart-routes';
Crete your route
const routes = {
user: new Route('/user')
}
Defining route
<Route path={routes.user().path} component={SomeComponent} />
Link like this
// Leads to /user
<Link to={routes.user().path}>
// ...
</Link>
Route parameters
const routes = {
user: new Route('/user', ':userId')
}
// `routes.user().path` leads to /user/:userId
<Route path={routes.user().path} component={SomeComponent} />
const someUserId = 123;
// Leads to /user/123
<Link to={routes.user(someUserId).exec()}>
// ...
</Link>
Subroutes
const routes = {
user: new Route('/user', {
info: new Route('/info')
})
}
<Route path={routes.user().info().path} component={SomeComponent} />
// Leads to /user/info
<Link to={routes.user().info().path}>
// ...
</Link>
Complete example
const routes = {
user: new Route('user', ':userId', {
info: new Route('info'),
cart: new Route('cart', {
item: new Route('item', ':itemId')
})
})
}
// /user/:userId
<Route path={routes.user().path} component={SomeComponent} />
// /user/:userId/info
<Route path={routes.user().info().path} component={SomeComponent1} />
// /user/:userId/cart
<Route path={routes.user().cart().path} component={SomeComponent2} />
// /user/:userId/cart/item/:itemId
<Route path={routes.user().cart().item().path} component={SomeComponent3} />
// Leads to /user/123
<Link to={routes.user(123).path}>
...
</Link>
// Leads to /user/123/info
<Link to={routes.user(123).info().path}>
...
</Link>
// Leads to /user/123/cart
<Link to={routes.user(123).cart().path}>
...
</Link>
// Leads to /user/123/cart/item/456
<Link to={routes.user(123).cart().item(456).path}>
...
</Link>