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 had published !!!
Keeper V2.0 had published !!!
Docs
Route Component -
( How to config the Route component )
Link Component -
( How to use Link component)
CacheLink Component -
( How to use CahceLink component )
RouteMapping -
( How to config path of route )
Filter -
( How to use filters )
Page Cache -
( How to cache pages )
Control -
( Use Router Control in JavaScript code. )
Browser -
( 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.
const App = ()=> {
return (
<HashRouter>
<div>
<Route cache component={ Home } path="/"/>
<Route component={ Products } path="/products"/>
</div>
</HashRouter>
)
}
const Products = ()=> {
return (
<div>
<Route component={ ScienceProducts } path="/sci" />
<Route component={ DailiUseProducts } path="/dai" />
</div>
)
}
ReactDOM.render(<App/>, 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.
- Use
cachetag to cache a page. - Use
CacheLinkComponent to hold a will-unmount's page when open a new page.
<Route cache component={Home} path='/'/>
<CacheLink to='/product/ASDFADF'>Detail</CacheLink>
3. Supports loading components dynamicly
Load a component dynamicly when it's route matches, such as:
<Route loadComponent={ (callback)=>{
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.
<HashRouter>
<Route path='/user' component={User}, enterFilter={[ loginFilter, (cb, props)=>{ if(props.access) cb()} ] } />
</HashRouter>
5. Pretty flexible
indextag : Index page of a module.misstag : When miss match.cachetag : Cache a page for preventing to unmount after it mounted.
<HashRouter>
<div>
<Route cache component={ Home } path="/"/>
<Route component={ Products } path="/products" enterFilter={ loginFilter }>
<Route index component={Enterprise} path="/ep"/>
<Route miss component={ NotFound }/>
<Route component={ Detail } path="/item/:id" time={new Date().toLocaleString()}/>
</Route>
<Route component={ Home } path="/products">
<Route index component={ ProductNav }/>
</Route>
</div>
</HashRouter>
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
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 (
<HashRouter>
<div>
<Route cache component={ Home } path="/"/>
<Route component={ Products } path="/products" enterFilter={ loginFilter }>
<Route index component={Enterprise} path="/ep"/>
<Route miss component={ NotFound }/>
<Route component={ Detail } path="/item/:id" time={new Date().toLocaleString()}/>
</Route>
<Route component={ User } path="/user"/>
</div>
</HashRouter>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'))
User.js
import React, { Component } from 'react'
import { Link, Route } from 'react-keeper'
// other import
export default class User extends Component {
render(){
return (
<div>
<ul>
<Link to='/info'>Info</Link>
<Link to='/edit'>Edit</Link>
</ul>
<div>
<Route index component={ UserInfo } path='/info'/>
<Route component={ UserInfoEdit } path='/edit'/>
</div>
</div>
)
}
}
Support React-Keeper and Author
With your donation, we can do it better.
Contributors
- Clone Project
git clone git@github.com:lanistor/react-keeper.git
cd react-keeper
npm install
- Run Example
npm run start
Then open http://127.0.0.1:8600