react react-activation keep-alive 实现路由跳转返回保留组件状态

import React, { useState, useEffect, useRef } from 'react';
import { Route, Switch, useLocation } from 'react-router-dom';
 
// 自定义一个KeepAlive组件来包裹需要保持状态的组件
const KeepAlive = ({ children }) => {
  const location = useLocation();
  // 使用ref来存储组件的副本
  const ref = useRef(null);
 
  useEffect(() => {
    // 当location变化时，将当前的副本存储到ref中
    ref.current = children;
  }, [location, children]);
 
  // 如果ref中存在副本，则返回副本，否则返回null
  return ref.current || null;
};
 
function App() {
  return (
    <div className="App">
      <Switch>
        <Route path="/about" component={KeepAlive}>
          {/* 将需要保持状态的组件作为子元素传入 */}
          <About />
        </Route>
        <Route path="/">
          {/* 其他路由不使用keep-alive机制 */}
          <Home />
        </Route>
      </Switch>
    </div>
  );
}
 
export default App;

这个例子中，我们定义了一个KeepAlive组件，它使用useRef来保持组件的副本。当路由变化并且组件被卸载时，副本会被保存下来，在相同路由再次被访问时，会恢复这个副本，从而实现了组件状态的保留。这是一个简单的实现方式，可以根据实际需求进行扩展和优化。