{"id":20969963,"url":"https://github.com/cjy0208/react-router-cache-route","last_synced_at":"2025-05-14T02:00:19.523Z","repository":{"id":41271483,"uuid":"138700809","full_name":"CJY0208/react-router-cache-route","owner":"CJY0208","description":"Route with cache for react-router V5 like \u003ckeep-alive /\u003e in Vue","archived":false,"fork":false,"pushed_at":"2024-11-21T02:06:34.000Z","size":4640,"stargazers_count":1170,"open_issues_count":40,"forks_count":113,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-25T13:04:05.390Z","etag":null,"topics":["cache","react","react-route","router"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-router-cache-route","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CJY0208.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-26T07:27:42.000Z","updated_at":"2025-04-18T13:20:29.000Z","dependencies_parsed_at":"2024-01-13T17:58:31.957Z","dependency_job_id":"590fa803-1548-4e36-829c-ecab1a9be0e4","html_url":"https://github.com/CJY0208/react-router-cache-route","commit_stats":{"total_commits":122,"total_committers":7,"mean_commits":"17.428571428571427","dds":0.3688524590163934,"last_synced_commit":"d4e500af77da75b312e915623143570df1aa7eed"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CJY0208%2Freact-router-cache-route","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CJY0208%2Freact-router-cache-route/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CJY0208%2Freact-router-cache-route/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CJY0208%2Freact-router-cache-route/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CJY0208","download_url":"https://codeload.github.com/CJY0208/react-router-cache-route/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254052658,"owners_count":22006716,"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":["cache","react","react-route","router"],"created_at":"2024-11-19T03:55:27.985Z","updated_at":"2025-05-14T02:00:19.421Z","avatar_url":"https://github.com/CJY0208.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚠️⚠️⚠️ \u003cspan\u003eReact Router v6+ is NOT supported\u003c/span\u003e ⚠️⚠️⚠️\n\n# CacheRoute\n\n[![size](https://img.shields.io/bundlephobia/minzip/react-router-cache-route.svg)](https://github.com/CJY0208/react-router-cache-route)\n[![dm](https://img.shields.io/npm/dm/react-router-cache-route.svg)](https://github.com/CJY0208/react-router-cache-route)\n![](https://komarev.com/ghpvc/?username=cjy0208-react-router-cache-route\u0026label=VIEWS)\n\nEnglish | [中文说明](./README_CN.md)\n\nRoute with cache for `react-router` like `keep-alive` in Vue.\n\n[Online Demo](https://codesandbox.io/s/cache-route-demo-2spfh)\n\n**If you want `\u003cKeepAlive /\u003e` only, try [react-activation](https://github.com/CJY0208/react-activation)**\n\n**React v15+**\n\n**React-Router v4/v5**\n\n---\n\n\u003cimg src=\"./docs/CacheRoute.gif\"\u003e\n\n---\n\n## Problem Scenarios\n\nUsing `Route`, component can not be cached while going forward or back which lead to **losing data and interaction**\n\n---\n\n## Reason \u0026 Solution\n\nComponent would be unmounted when `Route` was unmatched\n\nAfter reading source code of `Route` we found that using `children` prop as a function could help to control rendering behavior.\n\n**Hiding instead of Removing** would fix this issue.\n\nhttps://github.com/remix-run/react-router/blob/v5.3.4/packages/react-router/modules/Route.js#L46-L61\n\n---\n\n## Install\n\n```bash\nnpm install react-router-cache-route --save\n# or\nyarn add react-router-cache-route\n```\n\n---\n\n## Usage\n\nReplace `Route` with `CacheRoute`\n\nReplace `Switch` with `CacheSwitch` (Because `Switch` only keeps the first matching state route and unmount the others)\n\n```javascript\nimport React from 'react'\nimport { HashRouter as Router, Route } from 'react-router-dom'\nimport CacheRoute, { CacheSwitch } from 'react-router-cache-route'\n\nimport List from './views/List'\nimport Item from './views/Item'\n\nconst App = () =\u003e (\n  \u003cRouter\u003e\n    \u003cCacheSwitch\u003e\n      \u003cCacheRoute exact path=\"/list\" component={List} /\u003e\n      \u003cRoute exact path=\"/item/:id\" component={Item} /\u003e\n      \u003cRoute render={() =\u003e \u003cdiv\u003e404 Not Found\u003c/div\u003e} /\u003e\n    \u003c/CacheSwitch\u003e\n  \u003c/Router\u003e\n)\n\nexport default App\n```\n\n---\n\n## CacheRoute props\n\n| name                          | type                  | default                                                        | description                                                                                                                                                                                                                     |\n| ----------------------------- | --------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| when                          | `String` / `Function` | `\"forward\"`                                                    | Decide when to cache                                                                                                                                                                                                            |\n| className                     | `String`              | -                                                              | `className` prop for the wrapper component                                                                                                                                                                                      |\n| behavior                      | `Function`            | `cached =\u003e cached ? { style: { display: \"none\" }} : undefined` | Return `props` effective on the wrapper component to control rendering behavior                                                                                                                                                 |\n| cacheKey                      | `String` / `Function` | -                                                              | For imperative control caching                                                                                                                                                                                                  |\n| multiple (React v16.2+)       | `Boolean` / `Number`  | `false`                                                        | Allows different caches to be distinguished by dynamic routing parameters. When the value is a number, it indicates the maximum number of caches. When the maximum value is exceeded, the oldest updated cache will be cleared. |\n| unmount (UNSTABLE)            | `Boolean`             | `false`                                                        | Whether to unmount the real dom node after cached, to save performance (Will cause losing the scroll position after recovered, fixed with `saveScrollPosition` props)                                                           |\n| saveScrollPosition (UNSTABLE) | `Boolean`             | `false`                                                        | Save scroll position                                                                                                                                                                                                            |\n\n`CacheRoute` is only a wrapper component that works based on the `children` property of `Route`, and does not affect the functionality of `Route` itself.\n\nFor the rest of the properties, please refer to https://reacttraining.com/react-router/\n\n---\n\n### About `when`\n\nThe following values can be taken when the type is `String`\n\n- **[forward]** Cache when **forward** behavior occurs, corresponding to the `PUSH` or `REPLACE` action in react-router\n- **[back]** Cache when **back** behavior occurs, corresponding to the `POP` action in react-router\n- **[always]** Always cache routes when leave, no matter forward or backward\n\nWhen the type is `Function`, the component's `props` will be accepted as the first argument, return `true/false` to determine whether to cache.\n\n---\n\n## CacheSwitch props\n\n| name  | type       | default                                  | description                                                                                                                                                                                                                                                                                                                  |\n| ----- | ---------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| which | `Function` | `element =\u003e element.type === CacheRoute` | `\u003cCacheSwitch\u003e` only saves the first layer of nodes which type is `CacheRoute` **by default**, `which` prop is a function that would receive a instance of React Component, return `true/false` to decide if `\u003cCacheSwitch\u003e` need to save it, reference [#55](https://github.com/CJY0208/react-router-cache-route/issues/55) |\n\n---\n\n## Lifecycles\n\n### Hooks\n\nuse `useDidCache` and `useDidRecover` to inject customer Lifecycle `didCache` and `didRecover`\n\n```javascript\nimport { useDidCache, useDidRecover } from 'react-router-cache-route'\n\nexport default function List() {\n\n  useDidCache(() =\u003e {\n    console.log('List cached 1')\n  })\n\n  // support multiple effect\n  useDidCache(() =\u003e {\n    console.log('List cached 2')\n  })\n\n  useDidRecover(() =\u003e {\n    console.log('List recovered')\n  })\n\n  return (\n    // ...\n  )\n}\n```\n\n### Class Component\n\nComponent with CacheRoute will accept one prop named `cacheLifecycles` which contains two functions to inject customer Lifecycle `didCache` and `didRecover`\n\n```javascript\nimport React, { Component } from 'react'\n\nexport default class List extends Component {\n  constructor(props) {\n    super(props)\n\n    props.cacheLifecycles.didCache(this.componentDidCache)\n    props.cacheLifecycles.didRecover(this.componentDidRecover)\n  }\n\n  componentDidCache = () =\u003e {\n    console.log('List cached')\n  }\n\n  componentDidRecover = () =\u003e {\n    console.log('List recovered')\n  }\n\n  render() {\n    return (\n      // ...\n    )\n  }\n}\n```\n\n---\n\n## Drop cache\n\nYou can manually control the cache with `cacheKey` prop and `dropByCacheKey` function.\n\n```javascript\nimport CacheRoute, { dropByCacheKey, getCachingKeys } from 'react-router-cache-route'\n\n...\n\u003cCacheRoute ... cacheKey=\"MyComponent\" /\u003e\n...\n\nconsole.log(getCachingKeys()) // will receive ['MyComponent'] if CacheRoute is cached which `cacheKey` prop is 'MyComponent'\n...\n\ndropByCacheKey('MyComponent')\n...\n```\n---\n## Clear cache\n\nYou can clear cache with `clearCache` function.\n\n```js\nimport { clearCache } from 'react-router-cache-route'\n\nclearCache()\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcjy0208%2Freact-router-cache-route","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcjy0208%2Freact-router-cache-route","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcjy0208%2Freact-router-cache-route/lists"}