react如何缓存路由
React 缓存路由的方法
在 React 中缓存路由可以通过多种方式实现，以下是几种常见的方法：
使用 react-router 和 react-keep-alive
通过 react-keep-alive 库可以实现路由组件的缓存功能。安装后，用 KeepAlive 组件包裹需要缓存的子组件。
import { KeepAlive } from 'react-keep-alive';
<Route
path="/example"
render={() => (
<KeepAlive name="Example">
<ExampleComponent />
</KeepAlive>
)}
/>利用 React.memo 和状态管理
对于功能组件，可以用 React.memo 避免不必要的重新渲染。结合状态管理工具（如 Redux 或 Context API）保存路由状态。
const MemoizedComponent = React.memo(ExampleComponent);
<Route path="/memoized" component={MemoizedComponent} />通过 display: none 隐藏未激活路由
在切换路由时，不卸载组件而是隐藏它们，从而保留状态和 DOM。
<div style={{ display: isActive ? 'block' : 'none' }}>
<ExampleComponent />
</div>使用 useMemo 缓存组件数据
在组件内部用 useMemo 缓存计算密集型数据，减少重复渲染的开销。
const cachedData = useMemo(() => expensiveCalculation(input), [input]);选择方法时需根据项目需求权衡，react-keep-alive 适合完整路由缓存，而 React.memo 和 useMemo 更适用于局部优化。
