-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Alecell
committed
Aug 18, 2020
1 parent
606aac9
commit 04c3cfe
Showing
2 changed files
with
169 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,168 @@ | ||
# 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. | ||
<br /> | ||
<br /> | ||
|
||
## 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 lead to wrong 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. | ||
|
||
<br /> | ||
<br /> | ||
|
||
## Install | ||
--- | ||
### npm | ||
``` | ||
npm install smart-routes | ||
``` | ||
|
||
### yarn | ||
``` | ||
yarn add smart-routes | ||
``` | ||
<br /> | ||
<br /> | ||
|
||
## 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 | ||
<Route path={routes.user().exec()} component={SomeComponent} /> | ||
``` | ||
|
||
Link like this | ||
|
||
```jsx | ||
<Link to={routes.user().exec()}> // Leads to /user | ||
// ... | ||
</Link> | ||
``` | ||
|
||
<br /> | ||
<br /> | ||
|
||
## Route parameters | ||
--- | ||
|
||
```js | ||
const routes = { | ||
user: new Route('user', ':userId') | ||
} | ||
``` | ||
|
||
```jsx | ||
// routes.user() = /user/:userId | ||
<Route path={routes.user().exec()} component={SomeComponent} /> | ||
``` | ||
|
||
```jsx | ||
const someUserId = 123; | ||
|
||
// Leads to /user/123 | ||
<Link to={routes.user(someUserId).exec()}> | ||
// ... | ||
</Link> | ||
``` | ||
|
||
<br /> | ||
<br /> | ||
|
||
## Subroutes | ||
|
||
```js | ||
const routes = { | ||
user: new Route('user', { | ||
info: new Route('info') | ||
}) | ||
} | ||
``` | ||
|
||
```jsx | ||
<Route path={routes.user().info().exec()} component={SomeComponent} /> | ||
``` | ||
|
||
```jsx | ||
// Leads to /user/info | ||
<Link to={routes.user().info().exec()}> | ||
// ... | ||
</Link> | ||
``` | ||
|
||
## 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 | ||
<Route path={routes.user().exec()} component={SomeComponent} /> | ||
|
||
// /user/:userId/info | ||
<Route path={routes.user().info().exec()} component={SomeComponent1} /> | ||
|
||
// /user/:userId/cart | ||
<Route path={routes.user().cart().exec()} component={SomeComponent2} /> | ||
|
||
// /user/:userId/cart/item/:itemId | ||
<Route path={routes.user().cart().item().exec()} component={SomeComponent3} /> | ||
``` | ||
|
||
```jsx | ||
// Leads to /user/123 | ||
<Link to={routes.user(123).exec()}> | ||
// ... | ||
</Link> | ||
|
||
// Leads to /user/123/info | ||
<Link to={routes.user(123).info().exec()}> | ||
// ... | ||
</Link> | ||
|
||
// Leads to /user/123/cart | ||
<Link to={routes.user(123).cart().exec()}> | ||
// ... | ||
</Link> | ||
|
||
// Leads to /user/123/cart/item/456 | ||
<Link to={routes.user(123).item(456).exec()}> | ||
// ... | ||
</Link> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters