Un guide pratique pour gérer les pop-ups avec React Router

Question

J'utilise React Router sur le div racine, mais je n'arrive pas à comprendre comment gérer la fenêtre contextuelle lorsqu'un lien est cliqué.

Je sais que je peux charger une page HTML statique dans le dossier public, mais je veux que ce soit un fichier .js dans src.

Voici ce que je veux :

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

importer le test depuis './pages/test.js' ;


fonction Exemple() {
  retour (
    ≪>
    <Link onClick={() => window.open(<Test />, "Popup", "toolbar=non, emplacement=non, barre d'état=non, barre de menu=non, barres de défilement=1, redimensionnable =0, largeur=650, hauteur=400, haut=30")}>
     Bonjour
    </Lien>
    ≪/>
  );
}

Exporter par défaut Exemple ;

C'est la seule façon qui fonctionne, mais évidemment je perds la fonctionnalité de React (sauf si je lis mal ?) Le chemin de l'URL doit pointer vers un répertoire dans le répertoire public

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

importer le test depuis './pages/test.js' ;


fonction Exemple() {
  retour (
    ≪>
    <Link onClick={() => window.open('/example', "Popup", "toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, redimensionnable=0 , largeur = 650, hauteur = 400, haut = 30")}>
     Bonjour
    </Lien>
    ≪/>
  );
}

Exporter par défaut Exemple ;

Answer 1

La syntaxe pour ouvrir une fenêtre contextuelle est : window.open(url, name, params). Vous ne pouvez pas ajouter de composants dans la méthode d'ouverture de fenêtre et les méthodes d'ouverture de fenêtre sont construites différemment,

.

Pour plus d'informations, veuillez lire : Méthodes de pop-ups et de fenêtres