如何在React Router中缓存/list页面，仅重渲染变更内容？

这个场景我太熟了！每次从编辑页切回列表页，整个页面唰地全重渲染一遍，不仅浪费性能，连之前的滚动位置、筛选条件都没了，用户体验真的拉胯。下面给你几个经过实战验证的方案，既能缓存列表页状态，又完全支持直接访问/list页面：

方案一：路由嵌套+Outlet实现页面缓存（最推荐） #

核心思路是把/list作为父路由，/list/:itemId作为子路由。这样当你跳去编辑页时，列表页根本不会被卸载，只是隐藏起来。保存后只需要更新列表里对应项的数据就行，完美避免全量重渲染。

具体实现步骤： #

1. 配置嵌套路由

// 路由配置文件
import { createBrowserRouter } from 'react-router-dom';
import ListPage from './ListPage';
import EditPage from './EditPage';

const router = createBrowserRouter([
  {
    path: '/list',
    element: <ListPage />,
    children: [
      { path: ':itemId', element: <EditPage /> },
    ],
  },
]);

2. 改造ListPage组件
   在列表页里用Outlet渲染编辑页，同时控制列表和编辑区域的显示逻辑：

import { useState, useEffect } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';

function ListPage() {
  const [items, setItems] = useState([]);
  const [selectedItem, setSelectedItem] = useState(null);
  const navigate = useNavigate();
  const location = useLocation();

  // 仅在首次进入/list或主动刷新时加载数据
  useEffect(() => {
    if (location.pathname === '/list') {
      // 这里可以加判断，比如只有列表为空时才请求，避免重复加载
      if (items.length === 0) {
        fetch('/api/items').then(res => res.json()).then(data => setItems(data));
      }
    }
  }, [location.pathname, items.length]);

  // 处理编辑保存后的局部更新
  const handleItemSaved = (updatedItem) => {
    setItems(prevItems => 
      prevItems.map(item => item.id === updatedItem.id ? updatedItem : item)
    );
    navigate('/list'); // 切回列表视图
  };

  return (
    <div className="list-container">
      {/* 只在/list路径下显示列表 */}
      {location.pathname === '/list' && (
        <ul className="item-list">
          {items.map(item => (
            <li key={item.id}>
              <span>{item.name}</span>
              <button onClick={() => {
                setSelectedItem(item);
                navigate(`/list/${item.id}`);
              }}>编辑</button>
            </li>
          ))}
        </ul>
      )}

      {/* 编辑区域：通过Outlet渲染子路由组件，传递上下文数据 */}
      <Outlet context={{ selectedItem, onSave: handleItemSaved }} />
    </div>
  );
}

3. 编辑页接收上下文并处理保存
   用useOutletContext获取列表页传递的数据和回调：

import { useState, useEffect } from 'react';
import { useOutletContext, useParams } from 'react-router-dom';

function EditPage() {
  const { selectedItem, onSave } = useOutletContext();
  const { itemId } = useParams();
  const [formData, setFormData] = useState(selectedItem || {});

  // 如果是直接访问/list/:itemId，单独请求数据
  useEffect(() => {
    if (!selectedItem) {
      fetch(`/api/items/${itemId}`).then(res => res.json()).then(data => setFormData(data));
    }
  }, [itemId, selectedItem]);

  const handleSave = () => {
    // 提交保存请求
    fetch(`/api/items/${itemId}`, {
      method: 'PUT',
      body: JSON.stringify(formData),
      headers: { 'Content-Type': 'application/json' },
    })
    .then(res => res.json())
    .then(updatedItem => onSave(updatedItem));
  };

  return (
    <div className="edit-form">
      <input
        value={formData.name || ''}
        onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
        placeholder="输入名称"
      />
      {/* 其他表单字段 */}
      <button onClick={handleSave}>保存</button>
    </div>
  );
}

优势：列表页完全保留状态（滚动位置、筛选条件等），保存后只更新对应项，性能拉满。而且直接访问/list或/list/:itemId都完全正常，逻辑清晰，维护成本低。

方案二：全局状态管理缓存列表数据 #

如果不想改动现有路由结构，可以用Redux、Zustand这类全局状态管理工具缓存列表数据。列表页优先使用缓存，仅在必要时重新请求；编辑完成后更新全局状态里的对应项，列表页自动局部更新。

具体实现（以Zustand为例）： #

1. 创建全局状态Store

import { create } from 'zustand';

const useItemStore = create((set) => ({
  items: [],
  // 设置列表数据
  setItems: (data) => set({ items: data }),
  // 更新单个项
  updateItem: (updatedItem) => set(state => ({
    items: state.items.map(item => 
      item.id === updatedItem.id ? updatedItem : item
    )
  })),
}));

2. ListPage组件使用缓存数据

import { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import useItemStore from './useItemStore';

function ListPage() {
  const { items, setItems } = useItemStore();
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    // 仅当缓存为空，或者从非编辑路由进入时重新加载数据
    if (items.length === 0 || !location.state?.fromEdit) {
      fetch('/api/items').then(res => res.json()).then(data => setItems(data));
    }
  }, [items.length, location.state]);

  const handleEdit = (item) => {
    navigate(`/list/${item.id}`, { state: { fromList: true } });
  };

  return (
    <ul className="item-list">
      {items.map(item => (
        <li key={item.id}>
          <span>{item.name}</span>
          <button onClick={() => handleEdit(item)}>编辑</button>
        </li>
      ))}
    </ul>
  );
}

3. EditPage更新全局状态

import { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import useItemStore from './useItemStore';

function EditPage() {
  const { updateItem } = useItemStore();
  const navigate = useNavigate();
  const { itemId } = useParams();
  const [formData, setFormData] = useState({});

  useEffect(() => {
    fetch(`/api/items/${itemId}`).then(res => res.json()).then(data => setFormData(data));
  }, [itemId]);

  const handleSave = () => {
    fetch(`/api/items/${itemId}`, {
      method: 'PUT',
      body: JSON.stringify(formData),
      headers: { 'Content-Type': 'application/json' },
    })
    .then(res => res.json())
    .then(updatedItem => {
      updateItem(updatedItem);
      navigate('/list', { state: { fromEdit: true } });
    });
  };

  return (
    <div className="edit-form">
      <input
        value={formData.name || ''}
        onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
        placeholder="输入名称"
      />
      <button onClick={handleSave}>保存</button>
    </div>
  );
}

优势：不需要调整路由结构，适合已经使用全局状态管理的项目。直接访问/list时，缓存为空会自动加载数据；从编辑页回来时仅更新对应项，避免全量重渲染。

方案三：手动缓存组件状态（轻量方案） #

如果项目比较小，不想引入额外依赖，可以用useState结合useLocation手动缓存列表数据和滚动位置等状态。

具体实现： #

import { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

function ListPage() {
  const [items, setItems] = useState([]);
  const [scrollTop, setScrollTop] = useState(0);
  const navigate = useNavigate();
  const location = useLocation();

  // 保存滚动位置
  useEffect(() => {
    const handleScroll = () => setScrollTop(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    // 恢复滚动位置
    window.scrollTo(0, scrollTop);

    // 判断是否需要重新加载数据
    if (!location.state?.fromEdit || items.length === 0) {
      fetch('/api/items').then(res => res.json()).then(data => setItems(data));
    } else {
      // 从编辑页回来，更新对应项
      const updatedItem = location.state.updatedItem;
      setItems(prev => prev.map(item => 
        item.id === updatedItem.id ? updatedItem : item
      ));
    }
  }, [location, items.length, scrollTop]);

  const handleEdit = (item) => {
    navigate(`/list/${item.id}`);
  };

  return (
    <ul className="item-list">
      {items.map(item => (
        <li key={item.id}>
          <span>{item.name}</span>
          <button onClick={() => handleEdit(item)}>编辑</button>
        </li>
      ))}
    </ul>
  );
}

优势：零额外依赖，适合小型项目。但状态只存在组件内部，刷新页面会丢失，不过直接访问/list时仍会正常加载数据。

总结 #

• 优先选方案一：路由嵌套的方式最彻底，完全保留页面状态，性能最优，逻辑也最清晰。
• 现有项目不想改路由？选方案二：全局状态管理的方式兼容性好，适合大多数中大型项目。
• 小型项目快速解决？选方案三：手动缓存轻量简单，够用就行。

内容的提问来源于stack exchange，提问作者Piu130