react中路由如何禁止跳转
禁止路由跳转的方法
在React中，可以通过多种方式阻止路由跳转，具体取决于使用的路由库（如React Router v5/v6）。以下是常见场景的实现方法：
使用Prompt组件（React Router v5）
React Router v5提供了Prompt组件，用于在用户尝试离开当前页面前弹出确认提示：
import { Prompt } from 'react-router-dom';
function MyComponent() {
const [isBlocking, setIsBlocking] = useState(true);
return (
<>
<Prompt
when={isBlocking}
message="您有未保存的更改，确定要离开吗？"
/>
{/* 页面内容 */}
</>
);
}when：布尔值，控制是否触发拦截message：字符串或函数，返回自定义提示信息
使用useBlocker（React Router v6）
React Router v6移除了Prompt，需通过useBlocker实现类似功能：
import { useBlocker } from 'react-router-dom';
function MyComponent() {
const [isBlocking, setIsBlocking] = useState(true);
useBlocker(({ nextLocation }) => {
return isBlocking
? !window.confirm('离开后数据将丢失，确认继续？')
: false;
}, isBlocking);
}- 需配合
unstable_HistoryRouter或数据路由使用 - 回调函数返回
true则阻止导航
在导航守卫中拦截
通过useNavigate的拦截逻辑实现：
import { useNavigate } from 'react-router-dom';
function ProtectedPage() {
const navigate = useNavigate();
const allowNavigation = false; // 根据条件动态设置
useEffect(() => {
const unblock = navigate((location, action) => {
if (!allowNavigation && action !== 'POP') {
return false; // 阻止导航
}
return true;
});
return () => unblock();
}, [navigate, allowNavigation]);
}自定义路由组件
通过高阶组件包装路由，实现权限控制：
function ProtectedRoute({ children }) {
const isAllowed = checkAuth(); // 自定义验证逻辑
if (!isAllowed) {
return null; // 或重定向到登录页
}
return children;
}
// 使用方式
<Route path="/protected" element={
<ProtectedRoute>
<ProtectedPage />
</ProtectedRoute>
} />关键注意事项
-
浏览器原生行为：无法阻止关闭标签页或浏览器，只能通过
window.onbeforeunload事件处理window.addEventListener('beforeunload', (e) => { if (hasUnsavedChanges) { e.preventDefault(); e.returnValue = ''; // Chrome需要设置返回值 } }); -
内存路由：在测试环境中需模拟浏览器历史对象
-
性能影响：频繁的路由拦截可能影响用户体验，建议仅在关键操作（如表单未保存）时启用
根据项目使用的React Router版本和具体需求选择合适的方法。v6版本更推荐使用useBlocker或自定义路由组件方案。
