Registry / testing / react-router-cache-route

react-router-cache-route

library1.13.0jsnpmunverified

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.

testing

npm install react-router-cache-route

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-ROUTER-CACHE

react-router-cache-route

testingjavascriptv1.13.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

CacheRoute

✓ import CacheRoute from 'react-router-cache-route'

✗ import { CacheRoute } from 'react-router-cache-route'

CacheRoute is a default export, not a named export. Common mistake.

CacheSwitch

✓ import { CacheSwitch } from 'react-router-cache-route'

✗ import CacheSwitch from 'react-router-cache-route'

CacheSwitch is a named export, not a default export.

useCacheRoute

✓ import { useCacheRoute } from 'react-router-cache-route'

✗ import useCacheRoute from 'react-router-cache-route'

useCacheRoute is a named export (hook), available since v1.0.0.

React Router Route

✓ import { Route } from 'react-router-dom'

✗ import Route from 'react-router-cache-route'

Regular Route is from react-router-dom, not from this package. Only CacheRoute is provided.

Basic usage: replace Route with CacheRoute and Switch with CacheSwitch to enable route caching.

import React from 'react' import { HashRouter, Route, Switch } from 'react-router-dom' import CacheRoute, { CacheSwitch } from 'react-router-cache-route' const List = () => <div>List (cached)</div> const Item = ({ match }) => <div>Item {match.params.id}</div> function App() { return ( <HashRouter> <CacheSwitch> <CacheRoute exact path="/list" component={List} /> <Route exact path="/item/:id" component={Item} /> <Route render={() => <div>404</div>} /> </CacheSwitch> </HashRouter> ) } export default App

Debug

Known issues

gotchaYou must use CacheSwitch instead of Switch when using CacheRoute, otherwise only the first matching route will be rendered and others will be unmounted.

fix

Replace <Switch> with <CacheSwitch> from 'react-router-cache-route'.

affects: >=1.0.0

gotchaCacheRoute does not work properly with React Router v6. The package is designed for v4/v5.

fix

Use with react-router-dom v4 or v5. For v6, consider other caching solutions like react-activation.

affects: >=1.0.0

gotchaThe 'when' prop defaults to 'forward', meaning only forward navigation caches the route. Backward navigation will unmount and remount the component.

fix

Set when='always' to cache on both forward and backward navigation.

affects: >=1.0.0

gotchaThe 'behavior' prop must return an object to be spread onto the wrapper div. If you return undefined, the component will be mounted/unmounted normally.

fix

Ensure behavior returns { style: { display: 'none' } } or similar when cached, and undefined or empty object when not.

affects: >=1.0.0

gotchaImporting as named export { CacheRoute } is a common mistake; CacheRoute is the default export.

fix

Use import CacheRoute from 'react-router-cache-route'.

affects: >=1.0.0

Errors

Common errors & fixes

Attempted import error: 'CacheRoute' is not exported from 'react-router-cache-route'.

Using named import instead of default import

fix

Change to: import CacheRoute from 'react-router-cache-route'

Uncaught Error: [CacheSwitch] You should not use <CacheRoute> inside a regular <Switch>.

CacheRoute is used inside a plain Switch from react-router-dom

fix

Replace Switch with CacheSwitch from this package: import { CacheSwitch } from 'react-router-cache-route'

TypeError: Cannot read property 'pathname' of undefined

CacheRoute used outside a <Router> context

fix

Wrap your application in a BrowserRouter or HashRouter from react-router-dom

Warning: React does not recognize the `when` prop on a DOM element.

The when prop is passed to the underlying div element instead of being consumed by CacheRoute

fix

This is a known bug in some versions; upgrade to latest or avoid passing unknown props. Check GitHub issues for workarounds.

Upgrade

Version history

1.13.0latest on npm

Audit

Dependencies

reactrequiredRequired as a peer dependency for component rendering

react-router-domrequiredRequired as a peer dependency for route matching and navigation

prop-typesrequiredRequired as a peer dependency for runtime type checking

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/CJY0208/react-router-cache-route ↗

packagereact-router-cache-route ↗

homepagehttps://github.com/CJY0208/react-router-cache-route ↗