Eine praktische Anleitung zum Umgang mit Popups mit React Router

Question

Ich verwende React Router für das Root-Div, aber ich kann anscheinend nicht herausfinden, wie ich mit dem Popup umgehen soll, wenn auf einen Link geklickt wird.

Ich weiß, dass ich eine statische HTML-Seite in den öffentlichen Ordner laden kann, aber ich möchte, dass es sich um eine .js-Datei in src handelt.

Das ist es, was ich will:

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

Test aus „./pages/test.js“ importieren;


Funktion Beispiel() {
  zurückkehren (
    <>
    <Link onClick={() => window.open(<Test />, "Popup", "toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, skalierbar =0, Breite=650, Höhe=400, oben=30")}>
     Hallo
    </Link>
    </>
  );
}

Standard exportieren Beispiel;

Dies ist die einzige Möglichkeit, die funktioniert, aber offensichtlich verliere ich die Funktionalität von React (es sei denn, ich verstehe es falsch?) Der URL-Pfad soll auf ein Verzeichnis im öffentlichen Verzeichnis

verweisen.

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

Test aus „./pages/test.js“ importieren;


Funktion Beispiel() {
  zurückkehren (
    <>
    <Link onClick={() => window.open('/example', "Popup", "toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0 , Breite=650, Höhe=400, oben=30")}>
     Hallo
    </Link>
    </>
  );
}

Standard exportieren Beispiel;

Answer 1

打开弹出窗口的语法是：window.open(url, name, params)，你不能在window open方法中添加组件，弹出窗口和window open方法的构建方式不同，

更多信息请阅读：弹出窗口和window方法