React Router Cache Route 使用教程

项目介绍

react-router-cache-route 是一个用于 React 的路由管理库，它提供了类似于 Vue 中 keep-alive 的功能，可以在路由切换时缓存页面状态，避免页面重新加载导致的用户操作和数据丢失。这个库特别适用于需要保持页面状态的应用场景，如列表页和详情页之间的切换。

项目快速启动

安装

首先，你需要安装 react-router-cache-route：

npm install react-router-cache-route --save
# 或者使用 yarn
yarn add react-router-cache-route

基本使用

在你的 React 项目中，使用 CacheRoute 替换 Route，并使用 CacheSwitch 替换 Switch：

import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import { CacheRoute, CacheSwitch } from 'react-router-cache-route';

import Home from './views/Home';
import List from './views/List';
import Detail from './views/Detail';

const App = () => (
  <Router>
    <CacheSwitch>
      <CacheRoute exact path="/" component={Home} />
      <CacheRoute exact path="/list" component={List} />
      <Route exact path="/detail/:id" component={Detail} />
      <Route render={() => <div>404 未找到页面</div>} />
    </CacheSwitch>
  </Router>
);

export default App;

应用案例和最佳实践

缓存列表页

在电商网站中，用户经常需要在列表页和详情页之间切换。使用 react-router-cache-route 可以确保列表页的状态（如滚动位置、筛选条件）在返回时保持不变。

const ListPage = () => {
  const [items, setItems] = React.useState([]);

  // 模拟数据加载
  React.useEffect(() => {
    setTimeout(() => {
      setItems(Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`));
    }, 1000);
  }, []);

  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
};

export default ListPage;

缓存详情页

详情页通常包含大量信息，缓存可以减少数据加载时间，提升用户体验。

const DetailPage = ({ match }) => {
  const { id } = match.params;

  return (
    <div>
      <h1>Detail Page for Item {id}</h1>
      {/* 其他详细信息 */}
    </div>
  );
};

export default DetailPage;

典型生态项目

结合 Redux

在大型应用中，结合 Redux 管理状态可以更好地控制缓存页面的数据更新。

import { connect } from 'react-redux';
import { fetchItemDetail } from './actions';

const DetailPage = ({ match, item, fetchItemDetail }) => {
  const { id } = match.params;

  React.useEffect(() => {
    fetchItemDetail(id);
  }, [id, fetchItemDetail]);

  return (
    <div>
      <h1>Detail Page for Item {id}</h1>
      <div>{item ? item.description : 'Loading...'}</div>
    </div>
  );
};

const mapStateToProps = (state, ownProps) => ({
  item: state.items[ownProps.match.params.id],
});

export default connect(mapStateToProps, { fetchItemDetail })(DetailPage);

通过以上步骤，你可以快速启动并使用 react-router-cache-route，结合实际应用场景和最佳实践，提升你的 React 应用的用户体验。