React Router v6版本路由缓存刷新机制
从v5到v6的升级过程中，路由缓存机制的改变是开发者需要重点关注的点之一。v6版本采用了全新的路由设计，其中最显著的变化就是移除了<Switch>组件，转而使用<Routes>，同时在处理路由缓存和刷新方面也有了新的实现方式。
v6路由缓存机制变化
在v5中，我们可以通过<Switch>的location属性来控制路由缓存。但v6版本中，这种机制已经被废弃。v6采用了一种全新的方式来管理路由组件的重新渲染和缓存。
实现方法
- 使用
useNavigateHook进行页面跳转
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
- 在需要刷新的路由组件中使用
useEffect监听
import { useEffect, useRef } from 'react';
const MyComponent = () => {
const prevLocation = useRef(window.location);
useEffect(() => {
if (prevLocation.current !== window.location) {
// 执行刷新逻辑
}
}, [window.location]);
};
- 利用
useLocation和key属性实现组件重渲染
import { useLocation } from 'react-router-dom';
const location = useLocation();
// 在路由组件中添加key属性
<Route key={location.pathname} path="/path" element={<MyComponent />} />
实际应用示例
当用户在应用中进行导航时，如果希望某个页面能够刷新数据而不是从缓存中读取，可以结合useLocation和useEffect实现。
const RefreshableComponent = () => {
const location = useLocation();
useEffect(() => {
// 每次location变化时重新加载数据
fetchData();
}, [location]);
return <div>刷新内容</div>;
};
通过以上方式，开发者可以更好地控制路由组件的刷新行为，避免缓存导致的数据不一致问题。
讨论