React Keeper is 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 Routing...
We create a lot of flexible ways, so you can config the router more simplely.
And more...
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'))
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>
Load a component dynamicly when it's route matches, such as:
<Route loadComponent={ (callback)=>{ System.import('../Products.js').then((Products)=>{ callback(Products) }) } } path='/products'/>
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>
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>
-
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.
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> ) } }
- Clone Project
git clone git@github.com:vifird/react-keeper.git
cd react-keeper
npm install
- Run Example
npm run example
Then open http://127.0.0.1:8600