{"id":13445952,"url":"https://github.com/lanistor/react-keeper","last_synced_at":"2025-03-21T05:31:20.816Z","repository":{"id":55196081,"uuid":"70463588","full_name":"lanistor/react-keeper","owner":"lanistor","description":"A routing library of React.","archived":false,"fork":false,"pushed_at":"2023-01-26T12:35:00.000Z","size":2121,"stargazers_count":802,"open_issues_count":57,"forks_count":76,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-01-09T17:07:19.771Z","etag":null,"topics":["javascript","keeper","react","router"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lanistor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-10T07:38:49.000Z","updated_at":"2024-11-29T03:46:10.000Z","dependencies_parsed_at":"2023-02-09T11:02:26.538Z","dependency_job_id":null,"html_url":"https://github.com/lanistor/react-keeper","commit_stats":null,"previous_names":["vifird/react-flex-router","vifird/react-keeper"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lanistor%2Freact-keeper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lanistor%2Freact-keeper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lanistor%2Freact-keeper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lanistor%2Freact-keeper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lanistor","download_url":"https://codeload.github.com/lanistor/react-keeper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244745712,"owners_count":20503048,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","keeper","react","router"],"created_at":"2024-07-31T05:00:42.465Z","updated_at":"2025-03-21T05:31:20.116Z","avatar_url":"https://github.com/lanistor.png","language":"JavaScript","readme":"# React-Keeper\n  A routing library of React, but more than router.  \n  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.  \n  We did a lot to let React-Keeper fit mobile APPs, such as `Pages Cache`, `Extensible Route`, `Route Filters` and so on.   \n  We create a lot of flexible ways, so you can config the router more simplely.   \n  And more...\n\n# News\n  \u003cb style=\"color:#fd5200\"\u003e[Keeper V2.1](https://github.com/lanistor/react-keeper/blob/master/docs/Version.md) had published !!!\u003c/b\u003e  \n  \u003cb style=\"color:#fd5200\"\u003e[Keeper V2.0](https://github.com/lanistor/react-keeper/blob/master/docs/Version.md) had published !!!\u003c/b\u003e\n\n## Docs\n  [Route Component](https://github.com/lanistor/react-keeper/blob/master/docs/Route.md) \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; -\n    ( How to config the `Route` component )    \n  [Link Component](https://github.com/lanistor/react-keeper/blob/master/docs/Link.md) \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; -\n    ( How to use `Link` component)  \n  [CacheLink Component](https://github.com/lanistor/react-keeper/blob/master/docs/CacheLink.md) \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; -\n    ( How to use `CahceLink` component )  \n  [RouteMapping](https://github.com/lanistor/react-keeper/blob/master/docs/RouteMapping.md) \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; -\n    ( How to config `path` of route )  \n  [Filter](https://github.com/lanistor/react-keeper/blob/master/docs/Filter.md) \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; -\n    ( How to use `filters` )  \n  [Page Cache](https://github.com/lanistor/react-keeper/blob/master/docs/PageCache.md) \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; -\n    ( How to `cache` pages )  \n  [Control](https://github.com/lanistor/react-keeper/blob/master/docs/Control.md) \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; -\n    ( Use Router `Control` in JavaScript code. )  \n  [Browser](https://github.com/lanistor/react-keeper/blob/master/docs/Browser.md) \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; -\n  ( Use React-Keeper in browser. )\n\n## Install\n  ```\n  npm install react-keeper\n  ```\n  *Don't use cnpm.*\n\n## Features\n\n### 1. Extensible route\n\n  You can add route components ***anywhere,anytime***.\n  ```javascript\n  const App = ()=\u003e {\n    return (\n      \u003cHashRouter\u003e\n        \u003cdiv\u003e\n          \u003cRoute cache component={ Home } path=\"/\"/\u003e\n          \u003cRoute component={ Products } path=\"/products\"/\u003e\n        \u003c/div\u003e\n      \u003c/HashRouter\u003e\n    )\n  }\n\n  const Products = ()=\u003e {\n    return (\n      \u003cdiv\u003e\n        \u003cRoute component={ ScienceProducts } path=\"/sci\" /\u003e\n        \u003cRoute component={ DailiUseProducts } path=\"/dai\" /\u003e\n      \u003c/div\u003e\n    )\n  }\n\n  ReactDOM.render(\u003cApp/\u003e, document.getElementById('root'))\n  ```\n\n### 2. Pages Cache\n  Cache pages' state while not matched, and recover them when matched. Certainly you can config which one to cache.  \n  1. Use `cache` tag to cache a page.\n  3. Use `CacheLink` Component to hold a will-unmount's page when open a new page.  \n\n  ```javascript\n   \u003cRoute cache component={Home} path='/'/\u003e\n\n   \u003cCacheLink to='/product/ASDFADF'\u003eDetail\u003c/CacheLink\u003e\n  ```\n\n### 3. Supports loading components dynamicly\n\n  Load a component dynamicly when it's route matches, such as:  \n\n  ```javascript\n  \u003cRoute loadComponent={ (callback)=\u003e{\n      import('../Products.js').then((Products)=\u003e{\n          callback(Products)\n        })\n    } } path='/products'/\u003e\n  ```\n\n### 4. Supports enter(and leave) filters\n  * `Enter filters`, filters run before a route mount succeed, such as : login's check.\n  * `Leave filters`, filters run before a route unmount succeed, such as : unsubmited form data.\n\n  ```javascript\n  \u003cHashRouter\u003e\n    \u003cRoute path='/user' component={User}, enterFilter={[ loginFilter, (cb, props)=\u003e{ if(props.access) cb()} ] } /\u003e\n  \u003c/HashRouter\u003e\n  ```\n\n### 5. Pretty flexible\n  * `index` tag : Index page of a module.\n  * `miss` tag : When miss match.\n  * `cache` tag : Cache a page for preventing to unmount after it mounted.  \n  ```javascript\n  \u003cHashRouter\u003e\n    \u003cdiv\u003e\n\n      \u003cRoute cache component={ Home } path=\"/\"/\u003e\n\n      \u003cRoute component={ Products } path=\"/products\" enterFilter={ loginFilter }\u003e\n        \u003cRoute index component={Enterprise} path=\"/ep\"/\u003e\n        \u003cRoute miss component={ NotFound }/\u003e\n        \u003cRoute component={ Detail } path=\"/item/:id\" time={new Date().toLocaleString()}/\u003e\n      \u003c/Route\u003e\n\n      \u003cRoute component={ Home }  path=\"/products\"\u003e\n        \u003cRoute index component={ ProductNav }/\u003e\n      \u003c/Route\u003e\n\n    \u003c/div\u003e\n  \u003c/HashRouter\u003e\n  ```\n\n### 6. In the future\n  * Supports rendering in server side\n\n  * Memory of scroll position  \n    Remember the scroll positions of every page, for scrolling to same position when back to a page.\n\n## Usage\n  App.js\n  ```javascript\n  import React, { Component } from 'react'\n  import ReactDOM from 'react-dom'\n  import { HashRouter, Route } from 'react-keeper'\n  import User from './User'\n  // other import\n\n  class App extends Component {\n    render(){\n      return (\n        \u003cHashRouter\u003e\n          \u003cdiv\u003e\n\n            \u003cRoute cache component={ Home } path=\"/\"/\u003e\n\n            \u003cRoute component={ Products } path=\"/products\" enterFilter={ loginFilter }\u003e\n              \u003cRoute index component={Enterprise} path=\"/ep\"/\u003e\n              \u003cRoute miss component={ NotFound }/\u003e\n              \u003cRoute component={ Detail } path=\"/item/:id\" time={new Date().toLocaleString()}/\u003e\n            \u003c/Route\u003e\n\n            \u003cRoute component={ User }  path=\"/user\"/\u003e\n\n          \u003c/div\u003e\n        \u003c/HashRouter\u003e\n      )\n    }\n  }\n\n  ReactDOM.render(\u003cApp/\u003e, document.getElementById('root'))  \n  ```\n  User.js\n  ```javascript\n  import React, { Component } from 'react'\n  import { Link, Route } from 'react-keeper'\n  // other import\n\n  export default class User extends Component {\n    render(){\n      return (\n        \u003cdiv\u003e\n          \u003cul\u003e\n            \u003cLink to='/info'\u003eInfo\u003c/Link\u003e\n            \u003cLink to='/edit'\u003eEdit\u003c/Link\u003e\n          \u003c/ul\u003e\n\n          \u003cdiv\u003e\n            \u003cRoute index component={ UserInfo } path='/info'/\u003e\n            \u003cRoute component={ UserInfoEdit } path='/edit'/\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      )\n    }\n  }\n  ```\n\n## Support React-Keeper and Author\n\u003e With your donation, we can do it better.  \n\n \u003cimg width=\"300\" src=\"https://raw.githubusercontent.com/lanistor/assets/master/imgs/support_react-keeper.png\"\u003e\n\n## Contributors\n  * ***Clone Project***\n  ```\n  git clone git@github.com:lanistor/react-keeper.git\n\n  cd react-keeper\n\n  npm install\n  ```\n\n  * ***Run Example***\n  ```\n  npm run start\n  ```\n  Then open `http://127.0.0.1:8600`\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flanistor%2Freact-keeper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flanistor%2Freact-keeper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flanistor%2Freact-keeper/lists"}