react 路由缓存案例

React 路由缓存可以通过以下步骤实现：

1. 安装 `react-router-dom` 和 `react-router-cache-route`：

npm install react-router-dom react-router-cache-route

2. 在需要缓存的路由组件外层包裹 `CacheRoute` 组件，并设置需要缓存的键名：

import { CacheRoute } from 'react-router-cache-route';
import { Route } from 'react-router-dom';

function Home() {
  return <div>Home</div>;
}

function About() {
  return <div>About</div>;
}

function App() {
  return (
    <>
      <CacheRoute path="/" exact component={Home} cacheKey="home" />
      <CacheRoute path="/about" component={About} cacheKey="about" />
    </>
  );
}

3. 在路由配置中使用 `CacheSwitch` 组件代替原有的 `Switch` 组件，这样可以让路由缓存生效：

import { CacheSwitch } from 'react-router-cache-route';
import { Route } from 'react-router-dom';

function Home() {
  return <div>Home</div>;
}

function About() {
  return <div>About</div>;
}

function App() {
  return (
    <CacheSwitch>
      <CacheRoute path="/" exact component={Home} cacheKey="home" />
      <CacheRoute path="/about" component={About} cacheKey="about" />
    </CacheSwitch>
  );
}

这样就可以实现路由缓存了，当用户再次访问已经缓存的路由组件时，会直接从缓存中读取数据，提升页面加载速度。