import { useState } from 'react';
import Tab1 from './Tab1';
import Tab2 from './Tab2';
function KeepAliveTabs() {
  // 1. 維護(hù)激活的標(biāo)簽和緩存的組件狀態(tài)
  const [activeKey, setActiveKey] = useState('tab1');
  const [cachedStates, setCachedStates] = useState({
    tab1: null, // 緩存Tab1的狀態(tài)
    tab2: null  // 緩存Tab2的狀態(tài)
  });
  // 2. 子組件狀態(tài)更新時，同步到父組件緩存
  const handleTab1StateChange = (state) => {
    setCachedStates(prev => ({ ...prev, tab1: state }));
  };
  const handleTab2StateChange = (state) => {
    setCachedStates(prev => ({ ...prev, tab2: state }));
  };
  // 3. 渲染所有標(biāo)簽（隱藏非激活標(biāo)簽，而非卸載）
  return (
    <div>
      <div className="tab-header">
        <button onClick={() => setActiveKey('tab1')}>標(biāo)簽1</button>
        <button onClick={() => setActiveKey('tab2')}>標(biāo)簽2</button>
      </div>
      <div className="tab-content">
        {/* 用display控制顯示/隱藏，保留組件實(shí)例和狀態(tài) */}
        <div style={{ display: activeKey === 'tab1' ? 'block' : 'none' }}>
          <Tab1 
            initialState={cachedStates.tab1} 
            onStateChange={handleTab1StateChange} 
          />
        </div>
        <div style={{ display: activeKey === 'tab2' ? 'block' : 'none' }}>
          <Tab2 
            initialState={cachedStates.tab2} 
            onStateChange={handleTab2StateChange} 
          />
        </div>
      </div>
    </div>
  );
}

import { useState, useEffect } from 'react';
import { useLocation, Routes, Route } from 'react-router-dom';
import Home from './Home';
import List from './List'; // 需要緩存的列表頁
import Detail from './Detail';
// 1. 緩存容器組件：管理需要緩存的路由組件
function KeepAliveRouter() {
  const location = useLocation();
  // 存儲緩存的組件：key=路由path，value=組件狀態(tài)/實(shí)例
  const [cachedComponents, setCachedComponents] = useState({
    '/list': null // 初始緩存List頁面
  });
  // 2. 路由變化時，判斷是否緩存當(dāng)前組件（這里僅緩存/list）
  useEffect(() => {
    const currentPath = location.pathname;
    // 若離開的是需要緩存的路由，保存其狀態(tài)（需List組件暴露狀態(tài)）
    if (currentPath === '/list' && List.saveState) {
      setCachedComponents(prev => ({
        ...prev,
        '/list': List.saveState() // 假設(shè)List組件有saveState方法返回當(dāng)前狀態(tài)
      }));
    }
  }, [location.pathname]);
  // 3. 渲染路由：緩存的組件用div包裹隱藏，未緩存的正常渲染
  return (
    <div>
      {/* 緩存的組件：始終掛載，用display控制顯示 */}
      {cachedComponents['/list'] && (
        <div style={{ display: location.pathname === '/list' ? 'block' : 'none' }}>
          <List initialState={cachedComponents['/list']} />
        </div>
      )}
      {/* 非緩存路由：正常掛載/卸載 */}
      <Routes location={location}>
        <Route path="/" element={<Home />} />
        {/* /list 已通過緩存容器渲染，這里可省略或留空 */}
        <Route path="/list" element={null} />
        <Route path="/detail/:id" element={<Detail />} />
      </Routes>
    </div>
  );
}

npm install react-keep-alive --save
# 或 yarn add react-keep-alive

import { BrowserRouter as Router } from 'react-router-dom';
import { KeepAliveProvider, KeepAlive } from 'react-keep-alive';
function App() {
  return (
    {/* 1. 全局注入KeepAliveProvider */}
    <KeepAliveProvider>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          {/* 2. 用KeepAlive包裹需要緩存的路由組件 */}
          <Route 
            path="/list" 
            element={
              <KeepAlive name="list-page"> {/* name唯一標(biāo)識緩存實(shí)例 */}
                <List />
              </KeepAlive>
            } 
          />
          <Route path="/detail/:id" element={<Detail />} />
        </Routes>
      </Router>
    </KeepAliveProvider>
  );
}