如何在 React Router 中处理弹出窗口答案

【问题标题】：How to handle popup in React Router如何在 React Router 中处理弹出窗口
【发布时间】：2022-11-22 09:02:01
【问题描述】：

我有 React Router 包装我的根 div，但我似乎无法弄清楚如何在单击链接时处理弹出窗口。

我知道我可以改为在公共文件夹中加载静态 HTML 页面，但我希望它是 src 中的 .js 文件。

这就是我要的：

import { Link } from "react-router-dom";

import Test from './pages/test.js';


function Example() {
  return (
    <>
    <Link onClick={() => window.open(<Test />, "Popup", "toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=650, height=400, top=30")}>
     Hello
    </Link>
    </>
  );
}

export default Example;

这是唯一有效的方法，然后我显然失去了 React 的功能（除非我看错了？）URL 路径指向 public 中的目录

import { Link } from "react-router-dom";

import Test from './pages/test.js';


function Example() {
  return (
    <>
    <Link onClick={() => window.open('/example', "Popup", "toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=650, height=400, top=30")}>
     Hello
    </Link>
    </>
  );
}

export default Example;

【问题讨论】：

标签： javascript html reactjs react-router

【解决方案1】：

在 React 上，我们使用门户而不是弹出窗口，了解一下这是一个例子

https://codesandbox.io/s/h4zv0

【讨论】：