Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alecell/smart-routes
A framework agnostic simple and lightweight way to create and reuse routes on web apps.
https://github.com/alecell/smart-routes
angular angularjs prs react-router reuse-routes vue-router
Last synced: about 2 months ago
JSON representation
A framework agnostic simple and lightweight way to create and reuse routes on web apps.
- Host: GitHub
- URL: https://github.com/alecell/smart-routes
- Owner: Alecell
- Created: 2020-08-17T21:36:50.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-01T21:06:09.000Z (8 months ago)
- Last Synced: 2024-07-18T14:00:25.677Z (5 months ago)
- Topics: angular, angularjs, prs, react-router, reuse-routes, vue-router
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/smart-routes
- Size: 12.7 KB
- Stars: 11
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
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
```js
const routes = {
user: new Route('/user')
}
```
Defining route
```jsx
```
Link like this
```jsx
// Leads to /user
// ...
```
## Route parameters
```js
const routes = {
user: new Route('/user', ':userId')
}
```
```jsx
// `routes.user().path` leads to /user/:userId
```
```jsx
const someUserId = 123;
// Leads to /user/123
// ...
```
## Subroutes
```js
const routes = {
user: new Route('/user', {
info: new Route('/info')
})
}
```
```jsx
```
```jsx
// Leads to /user/info
// ...
```
## Complete example
```js
const routes = {
user: new Route('user', ':userId', {
info: new Route('info'),
cart: new Route('cart', {
item: new Route('item', ':itemId')
})
})
}
```
```jsx
// /user/:userId
// /user/:userId/info
// /user/:userId/cart
// /user/:userId/cart/item/:itemId
```
```jsx
// Leads to /user/123
...
// Leads to /user/123/info
...
// Leads to /user/123/cart
...
// Leads to /user/123/cart/item/456
...
```