React弹窗在开发服务器正常，生产构建后出现404问题求助

核心原因 #

你遇到的问题是单页应用（SPA）路由在生产环境的服务器适配问题：

• 开发服务器（比如create-react-app的devServer）默认配置了路由 fallback，所有未知路径都会指向index.html，让React Router接管路由解析。
• 生产环境下，当你用window.open("/popup")打开新窗口时，浏览器会直接向服务器请求/popup这个物理路径，但服务器上并没有对应的文件，所以返回404错误。

解决方案 #

方案1：配置服务器路由 fallback（推荐） #

让服务器将所有路由请求都重定向到index.html，这样React Router就能处理所有前端路由。不同服务器的配置方式如下：

Nginx

在你的Nginx配置文件中，找到对应站点的location块，添加：

location / {
  try_files $uri $uri/ /index.html;
}

Apache

在项目根目录创建.htaccess文件，写入：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Vercel/Netlify

这类平台默认支持SPA路由，只需在项目根目录创建对应配置文件：

• Netlify：创建_redirects文件

  /*    /index.html   200
  

• Vercel：创建vercel.json文件

  {
    "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
  }
  

方案2：改用HashRouter #

将BrowserRouter替换为HashRouter，路由会以#作为分隔符（比如/#/popup），此时浏览器只会请求根路径的index.html，前端路由通过哈希值解析路径，不会触发服务器的物理路径请求。

修改代码如下：

import { HashRouter as Router, Route, Routes, Link } from "react-router-dom";

// 其余代码不变，仅替换Router类型
root.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path="/*" element={<Main />}></Route>
        <Route path="/popup" element={<Popup />}></Route>
      </Routes>
    </Router>
  </React.StrictMode>
);

方案3：修改弹窗打开逻辑 #

不直接打开/popup路径，而是打开根路径并携带参数，在新窗口中根据参数渲染Popup组件：

1. 修改Main组件的点击逻辑：

<Link
  onClick={() => {
    window.open("/?showPopup=true", "popup", "width=500,height=500");
  }}
>
  <p>Click me to open popup</p>
</Link>

2. 新增根组件判断参数并渲染对应内容：

function App() {
  const searchParams = new URLSearchParams(window.location.search);
  const showPopup = searchParams.get("showPopup") === "true";

  return showPopup ? <Popup /> : <Main />;
}

// 更新路由配置
root.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path="/*" element={<App />}></Route>
      </Routes>
    </Router>
  </React.StrictMode>
);

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