react组件如何禁止路由跳转
阻止路由跳转的方法
在React中，可以通过以下方式阻止路由跳转，具体取决于使用的路由库（如React Router）或场景需求：
使用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(({ action }) => {
if (isBlocking && action === 'POP') {
return !window.confirm('确定放弃未保存的更改吗？');
}
return false;
}, isBlocking);
}- 当
isBlocking为true时，用户尝试后退或跳转会触发确认弹窗。 - 返回
true阻止导航，返回false允许导航。
在事件中阻止默认行为
对于非路由库控制的跳转（如<a>标签），可通过事件阻止：
function handleClick(e) {
e.preventDefault();
// 自定义逻辑
}
<a href="/other-page" onClick={handleClick}>禁止跳转的链接</a>条件渲染导航组件
通过状态控制<Link>或<Navigate>的渲染：
function MyComponent() {
const [allowNavigate, setAllowNavigate] = useState(false);
return (
<>
{allowNavigate ? (
<Link to="/target">允许跳转</Link>
) : (
<button disabled>禁止跳转</button>
)}
</>
);
}注意事项
- 浏览器API限制：无法完全阻止用户手动修改URL或关闭标签页。
- 用户体验：频繁阻止跳转可能引起反感，建议提供明确提示（如保存草稿）。
- React Router版本差异：v6需自行实现弹窗逻辑，而v5的
Prompt更简单。
根据项目需求选择合适方法，通常推荐结合路由库的API和状态管理实现细粒度控制。
