React Router でポップアップを処理するための実践的なガイド

Question

ルート div で React Router を使用していますが、リンクをクリックしたときにポップアップを処理する方法がわかりません。

静的 HTML ページをパブリック フォルダーに読み込めることはわかっていますが、それを src 内の .js ファイルにしたいと考えています。

これが私が望むものです:

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

'./pages/test.js' からテストをインポートします。


関数 Example() {
  戻る （
    <>
    <Link onClick={() => window.open(<Test />, "ポップアップ", "ツールバー=いいえ、場所=いいえ、ステータスバー=いいえ、メニューバー=いいえ、スクロールバー= 1、サイズ変更可能=0、幅=650、高さ=400、上部=30")}>
     こんにちは
    </リンク>
    </>
  );
}

デフォルトをエクスポート 例;

これが機能する唯一の方法ですが、明らかに React の機能が失われます (読み方が間違っていない限り)。URL パスはパブリック ディレクトリ

内のディレクトリを指します。

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

'./pages/test.js' からテストをインポートします。


関数 Example() {
  戻る （
    <>
    <Link onClick={() => window.open('/example', "ポップアップ", "ツールバー = いいえ、場所 = いいえ、ステータスバー = いいえ、メニューバー = いいえ、スクロールバー = 1、サイズ変更可能 = 0 、幅=650、高さ=400、上部=30")}>
     こんにちは
    </リンク>
    </>
  );
}

デフォルトをエクスポート 例;

Answer 1

ポップアップ ウィンドウを開くための構文は次のとおりです: window.open(url, name, params)。ウィンドウ オープン メソッドにコンポーネントを追加することはできません。ポップアップ ウィンドウとウィンドウ オープン メソッドの構築方法は異なります。

詳細については、次をお読みください: ポップアップ ウィンドウとウィンドウ メソッド