How to handle popup in React Router

Question

I have React Router wrapping my root div but I can't seem to figure out how to handle a popup window when a link is clicked.

I know I can instead load a static HTML page in the public folder but I'd like it to be a .js file in src.

This is what I want:

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;

This is the only thing that works and then I obviously lose the functionality of React (unless I'm looking at it wrong?) The URL path is to a directory in public

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;

Are you just wanting to open a dialog box in response to clicking on an interactive element in your app? What are you trying to accomplish here? — Drew Reese, Nov 22 '22 at 01:00
It's a rebuild of an old game website, so the popup window encapsulates a shockwave movie file — Justin Riley, Nov 22 '22 at 01:06
Is the URL external to the React app? Or are you trying to render the content into an `iframe` in an instance of your app that you want to open in a new "pop up" window? Please try to better explain the use case and issue and provide a more complete [mcve]. — Drew Reese, Nov 22 '22 at 01:11
@DrewReese tbh I'm not quite sure how to create a reproducible example because I'm not quite sure how to code it. But in a nut shell, when the link is clicked, I want a fixed height/width window to be generated in a "popup" fashion. I can do this in an externally, i.e with the link pointing to the "public" folder, but I'd like it to be encompassed within the React app — Justin Riley, Nov 22 '22 at 23:55
Ok, I think you're on the right track then with `window.open`, but you will want to specify the full URL as this would be a new instance of your app running in the popup window on the route you are targeting. If the server hosting the app is configured correctly to handle sub-route page requests this should work. — Drew Reese, Nov 23 '22 at 00:00
@DrewReese I think I found cause of my issue; my defined route for that particular link shared a name with a folder in the "public" folder. Once they were given separate names, it's now rendering the targeted component. Thanks! (again) — Justin Riley, Nov 23 '22 at 00:11

score 1 · Answer 1 · answered Nov 22 '22 at 09:54

The syntax to open a popup is: window.open(url, name, params), you can't add a component inside method window open, is build differently between pop up with component and window open method,

for more information you can read this : popups and window methods

score 0 · Answer 2 · answered Nov 22 '22 at 00:47

0

on react we use portals instead of pop ups, learn about it here is an example

https://codesandbox.io/s/h4zv0

answered Nov 22 '22 at 00:47

Sofiane

95
1
10

score 0 · Answer 3 · answered Nov 22 '22 at 01:07

I dont know why you want to do that XD but the window.open only have a URL or "", like firts parameter, but you can create a portal with react-dom or a reactDom.render:

create a portal: https://stackoverflow.com/a/71907023/13625491

with reactDom.render:

onClick={() => {
          var myWindow = window.open(
            "",
            "Popup",
            "toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=650, height=400, top=30"
          );
          myWindow && ReactDOM.render(<ReactElement color="error" variant="contained">this is a element of react</ReactElement>,  myWindow.document.body);
        }}

How to handle popup in React Router

3 Answers3