{"id":46055,"library":"react-router-cache-route","title":"react-router-cache-route","description":"A React component that provides Vue-like keep-alive caching for react-router v4+ routes. Version 1.13.0 is the latest stable release; the package is maintained sporadically with low release cadence. It uses a `CacheRoute` wrapper that hides instead of unmounts the component when the route becomes unmatched, preserving component state and DOM. It also provides a `CacheSwitch` to replace `Switch` for proper caching behavior. Alternatives include `react-activation` for a standalone `<KeepAlive>` component.","status":"active","version":"1.13.0","language":"javascript","source_language":"en","source_url":"https://github.com/CJY0208/react-router-cache-route","tags":["javascript","cache","cache route","react","react router","keep alive","keep alive route"],"install":[{"cmd":"npm install react-router-cache-route","lang":"bash","label":"npm"},{"cmd":"yarn add react-router-cache-route","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-router-cache-route","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for component rendering","package":"react","optional":false},{"reason":"Required as a peer dependency for route matching and navigation","package":"react-router-dom","optional":false},{"reason":"Required as a peer dependency for runtime type checking","package":"prop-types","optional":false}],"imports":[{"note":"CacheRoute is a default export, not a named export. Common mistake.","wrong":"import { CacheRoute } from 'react-router-cache-route'","symbol":"CacheRoute","correct":"import CacheRoute from 'react-router-cache-route'"},{"note":"CacheSwitch is a named export, not a default export.","wrong":"import CacheSwitch from 'react-router-cache-route'","symbol":"CacheSwitch","correct":"import { CacheSwitch } from 'react-router-cache-route'"},{"note":"useCacheRoute is a named export (hook), available since v1.0.0.","wrong":"import useCacheRoute from 'react-router-cache-route'","symbol":"useCacheRoute","correct":"import { useCacheRoute } from 'react-router-cache-route'"},{"note":"Regular Route is from react-router-dom, not from this package. Only CacheRoute is provided.","wrong":"import Route from 'react-router-cache-route'","symbol":"React Router Route","correct":"import { Route } from 'react-router-dom'"}],"quickstart":{"code":"import React from 'react'\nimport { HashRouter, Route, Switch } from 'react-router-dom'\nimport CacheRoute, { CacheSwitch } from 'react-router-cache-route'\n\nconst List = () => <div>List (cached)</div>\nconst Item = ({ match }) => <div>Item {match.params.id}</div>\n\nfunction App() {\n  return (\n    <HashRouter>\n      <CacheSwitch>\n        <CacheRoute exact path=\"/list\" component={List} />\n        <Route exact path=\"/item/:id\" component={Item} />\n        <Route render={() => <div>404</div>} />\n      </CacheSwitch>\n    </HashRouter>\n  )\n}\n\nexport default App","lang":"javascript","description":"Basic usage: replace Route with CacheRoute and Switch with CacheSwitch to enable route caching."},"warnings":[{"fix":"Replace <Switch> with <CacheSwitch> from 'react-router-cache-route'.","message":"You must use CacheSwitch instead of Switch when using CacheRoute, otherwise only the first matching route will be rendered and others will be unmounted.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use with react-router-dom v4 or v5. For v6, consider other caching solutions like react-activation.","message":"CacheRoute does not work properly with React Router v6. The package is designed for v4/v5.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set when='always' to cache on both forward and backward navigation.","message":"The 'when' prop defaults to 'forward', meaning only forward navigation caches the route. Backward navigation will unmount and remount the component.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure behavior returns { style: { display: 'none' } } or similar when cached, and undefined or empty object when not.","message":"The 'behavior' prop must return an object to be spread onto the wrapper div. If you return undefined, the component will be mounted/unmounted normally.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use import CacheRoute from 'react-router-cache-route'.","message":"Importing as named export { CacheRoute } is a common mistake; CacheRoute is the default export.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.13.0':25 'activ':78 'aliv':16,91,93 'also':63 'altern':74 'becom':55 'behavior':73 'cach':4,17,72,84,85 'cacherout':43 'cacheswitch':66 'cadenc':39 'compon':8,51,58,82 'dom':61 'hide':46 'includ':75 'instead':47 'javascript':83 'keep':15,90,92 'keep-al':14 'latest':28 'like':13 'low':37 'maintain':34 'packag':32 'preserv':57 'proper':71 'provid':10,64 'react':2,7,20,77,87,88 'react-activ':76 'react-rout':19 'react-router-cache-rout':1 'releas':30,38 'replac':68 'rout':5,23,54,86,94 'router':3,21,89 'sporad':35 'stabl':29 'standalon':81 'state':59 'switch':69 'unmatch':56 'unmount':49 'use':41 'v4':22 'version':24 'vue':12 'vue-lik':11 'wrapper':44","created_at":"2026-06-07T12:58:04.196800+00:00","updated_at":"2026-06-07T12:58:04.196800+00:00","problems":[{"fix":"Change to: import CacheRoute from 'react-router-cache-route'","cause":"Using named import instead of default import","error":"Attempted import error: 'CacheRoute' is not exported from 'react-router-cache-route'."},{"fix":"Replace Switch with CacheSwitch from this package: import { CacheSwitch } from 'react-router-cache-route'","cause":"CacheRoute is used inside a plain Switch from react-router-dom","error":"Uncaught Error: [CacheSwitch] You should not use <CacheRoute> inside a regular <Switch>."},{"fix":"Wrap your application in a BrowserRouter or HashRouter from react-router-dom","cause":"CacheRoute used outside a <Router> context","error":"TypeError: Cannot read property 'pathname' of undefined"},{"fix":"This is a known bug in some versions; upgrade to latest or avoid passing unknown props. Check GitHub issues for workarounds.","cause":"The when prop is passed to the underlying div element instead of being consumed by CacheRoute","error":"Warning: React does not recognize the `when` prop on a DOM element."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/CJY0208/react-router-cache-route","github":"https://github.com/CJY0208/react-router-cache-route","docs":null,"changelog":null,"pypi":null,"npm":"react-router-cache-route","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}