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...
Keeper V2.1 had published !!!
Keeper V2.0 had published !!!
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. )
npm install react-keeper
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
cache
tag to cache a page. - Use
CacheLink
Component 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>
index
tag : Index page of a module.miss
tag : When miss match.cache
tag : 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 [email protected]:vifird/react-keeper.git
cd react-keeper
npm install
- Run Example
npm run start
Then open http://127.0.0.1:8600