Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lanistor/react-keeper
A routing library of React.
https://github.com/lanistor/react-keeper
javascript keeper react router
Last synced: 2 months ago
JSON representation
A routing library of React.
- Host: GitHub
- URL: https://github.com/lanistor/react-keeper
- Owner: lanistor
- Created: 2016-10-10T07:38:49.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T12:35:00.000Z (almost 2 years ago)
- Last Synced: 2024-04-11T18:20:01.471Z (9 months ago)
- Topics: javascript, keeper, react, router
- Language: JavaScript
- Homepage:
- Size: 2.02 MB
- Stars: 804
- Watchers: 28
- Forks: 80
- Open Issues: 57
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Keeper
A routing library of React, but more than router.
React-Router is a great product, we learned a lot from it. But we truely faced many problems that React-Router doesn't resolve in real using, especially in mobile APPs.
We did a lot to let React-Keeper fit mobile APPs, such as `Pages Cache`, `Extensible Route`, `Route Filters` and so on.
We create a lot of flexible ways, so you can config the router more simplely.
And more...
# News
[Keeper V2.1](https://github.com/lanistor/react-keeper/blob/master/docs/Version.md) had published !!!
[Keeper V2.0](https://github.com/lanistor/react-keeper/blob/master/docs/Version.md) had published !!!
## Docs
[Route Component](https://github.com/lanistor/react-keeper/blob/master/docs/Route.md) -
( How to config the `Route` component )
[Link Component](https://github.com/lanistor/react-keeper/blob/master/docs/Link.md) -
( How to use `Link` component)
[CacheLink Component](https://github.com/lanistor/react-keeper/blob/master/docs/CacheLink.md) -
( How to use `CahceLink` component )
[RouteMapping](https://github.com/lanistor/react-keeper/blob/master/docs/RouteMapping.md) -
( How to config `path` of route )
[Filter](https://github.com/lanistor/react-keeper/blob/master/docs/Filter.md) -
( How to use `filters` )
[Page Cache](https://github.com/lanistor/react-keeper/blob/master/docs/PageCache.md) -
( How to `cache` pages )
[Control](https://github.com/lanistor/react-keeper/blob/master/docs/Control.md) -
( Use Router `Control` in JavaScript code. )
[Browser](https://github.com/lanistor/react-keeper/blob/master/docs/Browser.md) -
( Use React-Keeper in browser. )
## Install
```
npm install react-keeper
```
*Don't use cnpm.*
## Features
### 1. Extensible route
You can add route components ***anywhere,anytime***.
```javascript
const App = ()=> {
return (
)
}
const Products = ()=> {
return (
)
}
ReactDOM.render(, document.getElementById('root'))
```
### 2. Pages Cache
Cache pages' state while not matched, and recover them when matched. Certainly you can config which one to cache.
1. Use `cache` tag to cache a page.
3. Use `CacheLink` Component to hold a will-unmount's page when open a new page.
```javascript
Detail
```
### 3. Supports loading components dynamicly
Load a component dynamicly when it's route matches, such as:
```javascript
{
import('../Products.js').then((Products)=>{
callback(Products)
})
} } path='/products'/>
```
### 4. Supports enter(and leave) filters
* `Enter filters`, filters run before a route mount succeed, such as : login's check.
* `Leave filters`, filters run before a route unmount succeed, such as : unsubmited form data.
```javascript
{ if(props.access) cb()} ] } />
```
### 5. Pretty flexible
* `index` tag : Index page of a module.
* `miss` tag : When miss match.
* `cache` tag : Cache a page for preventing to unmount after it mounted.
```javascript
```
### 6. In the future
* Supports rendering in server side
* Memory of scroll position
Remember the scroll positions of every page, for scrolling to same position when back to a page.
## Usage
App.js
```javascript
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { HashRouter, Route } from 'react-keeper'
import User from './User'
// other import
class App extends Component {
render(){
return (
)
}
}
ReactDOM.render(, document.getElementById('root'))
```
User.js
```javascript
import React, { Component } from 'react'
import { Link, Route } from 'react-keeper'
// other import
export default class User extends Component {
render(){
return (
Info
Edit
)
}
}
```
## Support React-Keeper and Author
> With your donation, we can do it better.
## Contributors
* ***Clone Project***
```
git clone [email protected]:lanistor/react-keeper.git
cd react-keeper
npm install
```
* ***Run Example***
```
npm run start
```
Then open `http://127.0.0.1:8600`