如何在React Router中处理点击链接时的弹出窗口问题

问题分析 #

你之前的写法错误在于window.open()的第一个参数需要传入URL字符串，不能直接传React元素<Test />，这会被解析成[object Object]导致无法正常打开。而直接打开public目录下的静态页面，确实会丢失React的组件功能，因为静态页面没有挂载你的React应用。

正确实现步骤 #

1. 配置对应路由
   在你的路由配置文件（比如App.js）中，给Test组件添加专属的路由路径：

import { Routes, Route } from 'react-router-dom';
import Test from './pages/test.js';
import Example from './Example.js';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Example />} />
      {/* 给Test组件配置路由 */}
      <Route path="/test-popup" element={<Test />} />
    </Routes>
  );
}

export default App;

2. 修改弹出窗口触发逻辑
   在Example组件中，通过window.open()打开配置好的路由路径，同时如果使用Link标签，需要阻止默认的页面跳转行为：

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

function Example() {
  const openTestPopup = () => {
    window.open(
      '/test-popup',
      "Popup",
      "toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=650, height=400, top=30"
    );
  };

  return (
    <>
      {/* 方案1：用按钮触发，更直观 */}
      <button onClick={openTestPopup}>打开Test弹窗</button>

      {/* 方案2：用Link标签，需阻止默认跳转 */}
      <Link 
        onClick={(e) => {
          e.preventDefault(); // 阻止Link默认的页面跳转
          openTestPopup();
        }}
      >
        Hello
      </Link>
    </>
  );
}

export default Example;

原理说明 #

弹出窗口打开的/test-popup路径会被你的React Router捕获，匹配到对应的Test组件并渲染，这样弹出窗口就拥有完整的React组件功能，和主窗口共享同一个React应用的运行环境。

内容的提问来源于stack exchange，提问作者Justin