Skip to content

andyyxw/react-keeper

This branch is 23 commits behind lanistor/react-keeper:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
vifird
Mar 29, 2019
2082e0d · Mar 29, 2019
Jan 4, 2019
Dec 12, 2018
Oct 29, 2018
Mar 29, 2019
Oct 30, 2018
Mar 29, 2019
Mar 19, 2017
Aug 9, 2017
Oct 29, 2018
Jan 28, 2017
Oct 30, 2018
Mar 29, 2019
Dec 6, 2016
Oct 30, 2018
Mar 29, 2019
Aug 9, 2017

Repository files navigation

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 !!!

Ads

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.

  1. Use cache tag to cache a page.
  2. 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>

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

  • 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>

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>
    )
  }
}

Contributors

  • Clone Project
git clone git@github.com:vifird/react-keeper.git

cd react-keeper

npm install
  • Run Example
npm run start

Then open http://127.0.0.1:8600

About

A routing library of React.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 98.2%
  • HTML 1.7%
  • CSS 0.1%