基于BrowserRouter的应用内能否嵌套实例化另一个BrowserRouter？

• 业务需求是在 Sweetalert2 的 footer 插槽中渲染 React <Link> 路由组件，因此使用 sweetalert2-react-content 库实现 JSX 内容传入。
• 普通 JSX 内容传入弹窗配置时可以正常渲染，基础用法示例：

MySwal.fire({
  text: "Fire fire",
  footer: <div>Call the firebrigade</div>
});

• 异常表现：在相同位置传入 <Link> 组件时，组件会直接渲染为空，没有任何报错提示。
• 找到的对应解决方案是，在传入弹窗的 JSX 内容外层额外包裹一层 BrowserRouter，写法示例：

MySwal.fire({
  html: (
    <BrowserRouter>
      {/* 实际业务内容 */}
    </BrowserRouter>
  ),
})

• 这种在已经全局接入 BrowserRouter 的应用内部，再嵌套一层 BrowserRouter 的写法是否符合规范？
• 这种嵌套写法本质上会造成哪些影响？

写法合规性说明 #

这种写法属于特殊场景下的兼容方案，不属于 React Router 官方推荐的常规应用结构，但不会触发框架层面的硬错误，在当前弹窗场景下可以正常运行。

嵌套 BrowserRouter 的本质影响 #

React Router 所有和路由相关的组件、Hook（包括 <Link>、useNavigate、useParams 等）都必须处在 Router 提供的上下文环境中才能正常工作，找不到对应上下文时就会出现渲染为空、Hook 调用报错的问题。
sweetalert2-react-content 渲染弹窗内容时，默认会将 React 节点挂载到独立的 DOM 节点上，这个挂载节点脱离了应用根组件外层包裹的全局 BrowserRouter 上下文树，因此直接传入 <Link> 时会因为找不到路由上下文失效。
内层嵌套的 BrowserRouter 会创建一个完全独立的全新路由上下文实例，和外层应用的路由上下文互相隔离：

• 正向作用：包裹在这层 Router 内的 <Link> 等路由组件可以拿到运行必需的上下文，能正常渲染、正常触发路由跳转，在不额外读取路由状态的场景下，跳转行为和全局路由完全一致，用户感知不到差异。
• 存在的限制：这层独立上下文无法同步外层路由的状态，比如拿不到外层当前匹配的路由参数、路由跳转携带的state等数据，如果弹窗内的逻辑需要读取全局路由信息，会拿到新 Router 初始化的默认值，和外层实际路由状态不匹配。

更优实践 #

如果不想引入嵌套 Router 的额外隔离问题，更推荐使用库提供的自定义挂载能力，将弹窗的 React 渲染根节点放置在应用全局 BrowserRouter 的上下文覆盖范围内，让弹窗内的路由组件直接复用全局路由上下文，既不需要额外嵌套 Router，也不会出现状态不一致的问题。

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