处理弹出窗口的React Router实践指南
P粉898107874
2023-08-26 22:51:20
<p>我在根div上使用了React Router，但是我似乎无法弄清楚如何处理弹出窗口，当点击链接时。</p>
<p>我知道我可以在public文件夹中加载一个静态HTML页面，但我希望它是src中的一个.js文件。</p>
<p>这是我想要的：</p>
<pre class="brush:php;toolbar:false;">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;</pre>
<p>这是唯一有效的方法，但显然我失去了React的功能（除非我看错了？）URL路径是指向public目录中的一个目录</p>
<pre class="brush:php;toolbar:false;">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;</pre></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
打开弹出窗口的语法是：window.open(url, name, params)，你不能在window open方法中添加组件，弹出窗口和window open方法的构建方式不同，
更多信息请阅读：弹出窗口和window方法