A practical guide to handling pop-ups with React Router
P粉898107874
2023-08-26 22:51:20
<p>I'm using React Router on the root div, but I can't seem to figure out how to handle the popup when a link is clicked. </p>
<p>I know I can load a static HTML page in the public folder, but I want it to be a .js file in src. </p>
<p>This is what I want:</p>
<pre class="brush:php;toolbar:false;">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;</pre>
<p> This is the only way that works, but obviously I lose the functionality of React (unless I'm reading it wrong?) The URL path is to point to a directory in the public directory </p>
<pre class="brush:php;toolbar:false;">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;</pre></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The syntax for opening a pop-up window is: window.open(url, name, params). You cannot add components in the window open method. Pop-up windows and window open methods are constructed differently,
For more information, please read: Pop-up windows and window methods