React项目执行npm run build后出现空白页或404页问题咨询

问题原因 #

• 核心问题是你在项目中使用了BrowserRouter路由模式，该模式依赖HTML5 History API，仅在有对应服务端配置的HTTP服务下才能正常运行。你直接通过file://协议打开本地静态打包文件时，既没有服务端支持路由重定向，也无法正确匹配前端路由规则，大概率会直接命中404路由或资源加载失败，导致页面空白。
• 若你的项目后续是部署在域名的子目录下，当前未给BrowserRouter配置与package.json中homepage字段匹配的basename属性，也会引发资源加载异常、路由匹配失败的问题。

解决方法 #

方案1：替换路由模式（最简单，支持直接打开静态文件预览） #

将BrowserRouter替换为HashRouter，该模式基于URL的hash段实现路由，不需要服务端做额外配置，打包后直接打开index.html即可正常访问。
修改App.js代码如下：

import React, { useEffect } from "react";
// 把BrowserRouter替换为HashRouter
import { Switch, Route, HashRouter } from "react-router-dom";

//import some components omitted

const App = () => {
// some logical code
return (
        <HashRouter history={history}>
            <Switch>
                <Route path="/contact" component={Contact} exact />
                <Route path="/withdrawal" component={Withdrawal} exact />
                
                {/* and some Route code omitted */}

                <Route path="*" component={ErrPage} />
            </Switch>
        </HashRouter>
    );
};

export default App;

修改后重新执行npm run build打包即可。

方案2：保留BrowserRouter的配置方法 #

如果你需要保留BrowserRouter的无hash路由风格，按使用场景做对应配置：

• 本地预览打包结果：不要直接打开index.html，安装静态服务工具启动本地服务访问：
  执行命令：npx serve -s build，启动后按照终端提示的本地地址访问即可。
• 部署到生产服务器：给服务器配置全局重定向规则，保证所有路径的请求都返回index.html，交给前端路由处理：
  以Nginx为例，在配置文件的对应location块中添加：

  try_files $uri $uri/ /index.html;
  

  若项目部署在域名子目录下，除了要把package.json中的homepage字段改为对应子目录路径（如"homepage": "/你的子目录名/"），还要给BrowserRouter添加basename属性：

  <BrowserRouter basename="/你的子目录名" history={history}>
  

内容的提问来源于stack exchange，提问作者봉승우