React：如何避免浏览器返回按钮触发页面重新渲染

我有一个展示大量产品的商品目录页，当用户点击页面底部的产品（比如第1000个）进入详情页后，用浏览器返回按钮回到目录页时，页面会重新渲染——虽然逻辑上没问题，但滚动到之前选中产品的位置要花很长时间。选顶部产品（比如第4个）时一切正常，选底部产品就会出现这个问题。

有没有办法在React中缓存该目录页，避免渲染耗时？分页功能能解决，但我现在用的是“加载更多”按钮。试过React.memo，但它只在当前页面操作时生效，用浏览器返回按钮进入页面时没用。我用的是React Router v5，想先确认可行性再写代码。见过有些页面返回时不用重新渲染，像静态页面一样，滚动位置直接回到上次选中的产品位置，求相关解决方案。

解决方案 #

1. 路由外缓存组件（核心方案） #

React Router v5本身没有内置keep-alive功能，但可以通过将目录页组件放在路由匹配逻辑外，用状态控制显示/隐藏的方式实现缓存。核心是让目录页组件不被卸载，切换路由时仅隐藏，这样组件的所有状态（已加载的产品、滚动位置）都会保留。

2. 数据缓存+滚动位置优化（轻量化方案） #

如果不想完全缓存组件，可通过以下方式优化：

• 把已加载的产品数据存在sessionStorage或全局状态（Context/Redux）中，返回时直接复用，避免重复请求
• 实时记录滚动位置，返回时直接调用window.scrollTo恢复，不用等元素渲染后再定位

3. 使用react-router-cache-route库（第三方工具方案） #

这个库专门为React Router v5提供路由缓存功能，可一键缓存指定路由的组件实例，返回时直接复用，无需重新渲染。

代码示例 #

方案1：路由外缓存组件 #

修改App.jsx

import React, { StrictMode, useState } from 'react';
import { BrowserRouter, Switch, Route, Link, useLocation } from 'react-router-dom'
import './App.css';
import Home from './Home';
import Page1 from './Page1';
import Page2 from './Page2';

// 封装路由判断组件，控制目录页的显示/隐藏
const RouteHandler = () => {
  const location = useLocation();
  const [showPage1, setShowPage1] = useState(false);

  useEffect(() => {
    if (location.pathname === '/page1') {
      setShowPage1(true);
    } else {
      setShowPage1(false);
    }
  }, [location.pathname]);

  return (
    <>
      {/* Page1组件始终存在于DOM中，仅通过状态控制显示 */}
      {showPage1 && <Page1 />}
      <Switch>
        <Route path='/page2'>
          <Page2 />
        </Route>
        <Route path='/'>
          <Home />
        </Route>
      </Switch>
    </>
  );
};

function App() {
  return (
    <StrictMode>
      <BrowserRouter>
        <div className="App">
          <header className="App-header">
            <Link to='/'>home</Link><br />
            <Link to='/page1'>page 1</Link><br />
            <Link to='/page2'>page 2</Link><br />
          </header>
          <RouteHandler />
        </div>
      </BrowserRouter>
    </StrictMode>
  );
}

export default App;

修改Page1.jsx（去掉重复请求，优化滚动逻辑）

import React, { useEffect, useState } from 'react';
import Card from './Card';

const Page1 = () => {
  const [cards, setCards] = useState([]);

  const fetchData = () => {
    // 优先读取缓存数据
    const cachedCards = sessionStorage.getItem('cachedProducts');
    if (cachedCards) {
      setCards(JSON.parse(cachedCards));
      return;
    }
    fetch('https://jsonplaceholder.typicode.com/photos')
      .then((response) => response.json())
      .then((json) => {
        setCards(json);
        sessionStorage.setItem('cachedProducts', JSON.stringify(json));
      });
  };

  // 记录滚动位置
  useEffect(() => {
    const handleScroll = () => {
      sessionStorage.setItem('scrollPosition', window.scrollY.toString());
    };
    window.addEventListener('scroll', handleScroll);
    // 组件挂载时恢复滚动位置
    const scrollPos = sessionStorage.getItem('scrollPosition');
    if (scrollPos) window.scrollTo(0, parseInt(scrollPos));
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    fetchData();
  }, []);

  // 点击卡片时记录选中ID（可选，用于精准定位）
  const handleCardClick = (id) => {
    sessionStorage.setItem('selectedProductId', id);
  };

  return (
    <div className="grid">
      {cards.map((item) => (
        <Card 
          item={item} 
          key={item.id} 
          onClick={() => handleCardClick(item.id)} 
        />
      ))}
    </div>
  );
};

export default Page1;

Card.jsx（补充跳转逻辑）

import React from 'react';
import { Link } from 'react-router-dom';

const Card = ({ item, onClick }) => {
  return (
    <Link to="/page2" onClick={onClick} id={`card-${item.id}`}>
      <div>
        <h3>{item.title}</h3>
        <img src={item.thumbnailUrl} alt={item.title} />
      </div>
    </Link>
  );
};

export default Card;

方案3：使用react-router-cache-route库 #

1. 安装依赖：

npm install react-router-cache-route --save

2. 修改App.jsx：

import React, { StrictMode } from 'react';
import { BrowserRouter, Link } from 'react-router-dom'
import { CacheRoute, Switch } from 'react-router-cache-route';
import './App.css';
import Home from './Home';
import Page1 from './Page1';
import Page2 from './Page2';

function App() {
  return (
    <StrictMode>
      <BrowserRouter>
        <div className="App">
          <header className="App-header">
            <Link to='/'>home</Link><br />
            <Link to='/page1'>page 1</Link><br />
            <Link to='/page2'>page 2</Link><br />
          </header>
          <Switch>
            {/* 用CacheRoute替换Route实现缓存 */}
            <CacheRoute path='/page1' cacheKey="page1">
              <Page1 />
            </CacheRoute>
            <CacheRoute path='/page2'>
              <Page2 />
            </CacheRoute>
            <CacheRoute path='/'>
              <Home />
            </CacheRoute>
          </Switch>
        </div>
      </BrowserRouter>
    </StrictMode>
  );
}

export default App;

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