React18+RouterDom v6如何仅针对特定页面禁用浏览器返回按钮？

问题说明 #

我想只在特定页面阻止用户使用浏览器返回按钮，在page1.jsx里写了这段代码：

useEffect(() => {
  localStorage.clear();
  history.replace("/dashboard/customers")
}, []);

本来是要实现阻止该页面返回按钮的功能，结果报错：意外使用了'history'

解决方法 #

1. 正确获取路由历史对象（React Router 场景） #

直接用全局history会因为未正确引入触发ESLint错误，得根据React Router版本用对应的钩子获取：

• React Router v6+：用useNavigate替代history.replace

  import { useNavigate } from 'react-router-dom';
  
  function Page1() {
    const navigate = useNavigate();
  
    useEffect(() => {
      localStorage.clear();
      navigate("/dashboard/customers", { replace: true });
    }, [navigate]);
  }
  

• React Router v5：用useHistory获取history对象

  import { useHistory } from 'react-router-dom';
  
  function Page1() {
    const history = useHistory();
  
    useEffect(() => {
      localStorage.clear();
      history.replace("/dashboard/customers");
    }, [history]);
  }
  

2. 完整实现阻止返回的逻辑 #

上面的代码只是替换历史记录，要真正拦截返回操作，得监听浏览器的popstate事件：

import { useNavigate, useEffect } from 'react-router-dom';

function Page1() {
  const navigate = useNavigate();

  useEffect(() => {
    // 初始化替换历史记录，让返回按钮无页面可回
    localStorage.clear();
    navigate("/dashboard/customers", { replace: true });

    // 监听返回事件，触发时重新替换路由，阻止返回
    const handlePopState = () => {
      navigate("/dashboard/customers", { replace: true });
    };

    window.addEventListener('popstate', handlePopState);

    // 组件卸载时移除监听，避免影响其他页面
    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, [navigate]);

  return <div>页面内容</div>;
}

3. 注意点 #

• 必须通过React Router提供的钩子获取路由对象，不能直接用全局history，否则会触发你遇到的ESLint错误
• 组件卸载时一定要移除popstate监听，防止内存泄漏和影响其他页面的正常返回
• 这种方式能拦截浏览器返回按钮、键盘返回快捷键等触发的返回操作

内容的提问来源于stack exchange，提问作者Mohamed Abdirahman