React Router v6是否存在类似next/router的beforePopState方法？

首先要指出你当前代码的核心问题：popstate 事件不支持冒泡，所以你写的 e.stopPropagation() 根本无法阻止 React Router 响应地址栏变化——React Router 是直接监听 window 的 popstate 事件，和你的监听属于同级，不存在冒泡关系，自然无法拦截。

React Router v6 本身没有直接对应 next/router 中 beforePopState 的 API，但可以通过官方提供的导航拦截机制实现相同需求，下面是具体方案：

方案一：使用 useNavigation 的 block 方法（推荐） #

React Router v6.4+ 提供了 useNavigation 钩子，通过它的 block 方法可以拦截所有导航动作，包括浏览器回退触发的 POP 类型导航。

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

// 你的组件内
const navigation = useNavigation();

useEffect(() => {
  // 调用 block 方法注册拦截器，返回取消拦截的函数
  const unblock = navigation.block((tx) => {
    // 只拦截浏览器回退（POP 类型）且目标路径是弹窗相关的情况
    if (tx.type === 'POP' && tx.location.pathname.startsWith('/title/')) {
      // 提取路径中的 ID
      const id = parseInt(tx.location.pathname.match(/\d+/g)?.[0]!);
      if (isNaN(id)) {
        // ID 无效时允许默认导航
        return true;
      }

      // 加载弹窗数据并处理显示/隐藏
      titleEmbed(id).then(parseResponse).then(embed => {
        if (embed) {
          handleOpen(embed, { withoutAnimation: true });
        } else if (data) {
          handleClose();
        }
      });

      // 返回 false 阻止 React Router 执行导航（即不改变 Router 的 location）
      return false;
    }

    // 其他情况允许默认导航
    return true;
  });

  // 组件卸载时取消拦截
  return unblock;
}, [navigation, handleOpen, handleClose, data]);

方案二：自定义 History 实例（全局拦截） #

如果需要全局范围内拦截导航，可以自定义 history 实例并添加拦截器，再传递给 React Router 的 Router 组件：

import { createBrowserHistory } from 'history';
import { Router } from 'react-router-dom';

// 创建自定义 history 实例
const history = createBrowserHistory();

// 注册全局拦截器
history.block((tx) => {
  if (tx.type === 'POP' && tx.pathname.startsWith('/title/')) {
    // 这里处理弹窗逻辑，和上面一致
    const id = parseInt(tx.pathname.match(/\d+/g)?.[0]!);
    if (!isNaN(id)) {
      titleEmbed(id).then(parseResponse).then(embed => {
        // 注意：这里如果要调用组件内的 handleOpen/handleClose，需要把逻辑抽成全局方法或者用状态管理
        if (embed) {
          // 全局打开弹窗的逻辑
        } else {
          // 全局关闭弹窗的逻辑
        }
      });
    }
    return false;
  }
  return true;
});

// 在根组件中使用自定义 Router
function App() {
  return (
    <Router history={history}>
      {/* 你的路由配置 */}
    </Router>
  );
}

额外提示：关于刷新页面的问题 #

你提到刷新 /title/:id 会回到首页，是因为没有对应的路由配置。可以添加一个匹配 /title/:id 的路由，渲染当前页面的内容（而非弹窗单独路由），同时在该路由组件中触发弹窗打开逻辑：

// 路由配置中添加
<Route path="/title/:id" element={<YourCurrentPage />} />

// 在 YourCurrentPage 组件内
const { id } = useParams();
useEffect(() => {
  if (id) {
    titleEmbed(id).then(parseResponse).then(embed => {
      if (embed) {
        handleOpen(embed);
      }
    });
  }
}, [id, handleOpen]);

这样刷新时不会跳转到首页，而是停留在当前页面并自动打开弹窗。

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