處理彈出視窗的React Router實踐指南

Question

我在根div上使用了React Router，但是我似乎無法弄清楚如何處理彈出窗口，當點擊連結時。

我知道我可以在public資料夾中載入一個靜態HTML頁面，但我希望它是src中的一個.js檔案。

這是我想要的：

import { Link } 從 "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 } 從 "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;

Answer 1

開啟彈出視窗的語法是：window.open(url, name, params)，你不能在window open方法中加入元件，彈出視窗和window open方法的建構方式不同，

更多資訊請閱讀：彈出視窗與window方法

#