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: about 3 hours ago
JSON representation

A routing library of React.

Lists

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`