Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tj/react-enroute
React router with a small footprint for modern browsers
https://github.com/tj/react-enroute
Last synced: about 20 hours ago
JSON representation
React router with a small footprint for modern browsers
- Host: GitHub
- URL: https://github.com/tj/react-enroute
- Owner: tj
- License: mit
- Created: 2016-06-15T13:57:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T05:18:33.000Z (almost 2 years ago)
- Last Synced: 2024-12-06T09:03:45.788Z (8 days ago)
- Language: JavaScript
- Size: 2.31 MB
- Stars: 1,486
- Watchers: 15
- Forks: 22
- Open Issues: 5
-
Metadata Files:
- Readme: Readme.md
- Changelog: Changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# react-enroute
Simple React router with a small footprint for modern browsers. The lib is not
replacement for react-router, just a smaller simpler alternative.
See [path-to-regexp](https://github.com/pillarjs/path-to-regexp#usage)
for matching pattern rules and options. Check
[encode and decode](https://github.com/pillarjs/path-to-regexp#match)
if you need it.
Router size [limited](https://github.com/ai/size-limit) to **~2 KB**
(all deps, minified and gzipped).
## Installation
```console
yarn add react-enroute
```
or
```console
npm install react-enroute
```
## Usage
No nesting:
```js
```
Nesting and options:
```js
const RouterOptions = {decode: decodeURIComponent}
// '/'
// '/users'
// '/users/:id'
// absolute path
```
Following route with the same full path overrides previous. Matching goes
from top to bottom, so more general rules coming first take precedence. You
should put more concrete rules above catch-all.
Right order:
```js
```
**Not found** page (404) should be the last.
Paths may not start with `/`, the name-based syntax is ok:
```js
// use '' or '/' for index location
```
## Utils
### genLocation (alias: loc)
Generate location based on a path and params.
```js
genLocation('/users/:id', {id: '42'}) // => '/users/42'
loc('/pets/:id', {id: '123'}) // => '/pets/123'
```
### isPath
Check if location matches path.
```js
isPath('/users/:id', '/users/42') // => true
```
### findPath
Search path by location.
```js
findPath(['/users', '/users/:id'], '/users/42')
/* => {
path: '/users/:id',
params: {id: '42'},
} */
```
### findPathValue
Search over object whose keys are paths.
```js
findPathValue({
'/users': UserListToolbar,
'/users/:id': UserToolbar,
}, '/users/42')
/* => {
path: '/users/:id',
value: UserToolbar,
params: {id: '42'},
} */
```
## Badges
[](https://apex.sh/ping/)
---
> [tjholowaychuk.com](http://tjholowaychuk.com) ·
> GitHub [@tj](https://github.com/tj) ·
> Twitter [@tjholowaychuk](https://twitter.com/tjholowaychuk)