react如何清除路由缓存
清除 React 路由缓存的常见方法
使用 key 属性强制重新渲染
在路由组件上添加唯一的 key，当路由参数变化时，通过改变 key 值触发组件重新渲染。例如：
<Route path="/detail/:id" render={(props) => (
<DetailComponent key={props.match.params.id} />
)} />通过 useEffect 监听路由变化
在组件内部监听路由参数变化，手动触发数据重新获取或状态重置：
import { useParams } from 'react-router-dom';
function DetailComponent() {
const { id } = useParams();
const [data, setData] = useState(null);
useEffect(() => {
fetchData(id); // 每次id变化时重新获取数据
}, [id]);
}使用 React Router 的 Switch 组件Switch 会保证同一时间只渲染一个匹配的路由，避免多个路由组件同时保留状态：
import { Switch, Route } from 'react-router-dom';
<Switch>
<Route path="/page1" component={Page1} />
<Route path="/page2" component={Page2} />
</Switch>结合 unstable_HistoryRouter 或导航守卫
在路由跳转前手动清除缓存状态，例如使用自定义历史记录对象：
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
history.listen(() => {
// 在路由变化时执行清理逻辑
});针对组件级缓存的解决方案
手动重置组件状态
在组件卸载时（useEffect 清理函数）或路由变化时重置内部状态：
useEffect(() => {
return () => {
// 组件卸载时执行清理
resetState();
};
}, []);使用第三方库如 react-router-cache-route
专为路由缓存设计的库，可控制特定路由的缓存行为：
import CacheRoute from 'react-router-cache-route';
<CacheRoute path="/cached" component={CachedComponent} />注意事项
- 对于动态路由参数（如
/user/:id），确保key或依赖项数组包含所有可能影响渲染的参数 - 避免在全局状态（如 Redux）中保留过时数据，需在适当时机清理
- 对于复杂场景，可考虑使用
React.memo或useMemo优化性能而非完全阻止重新渲染
