使用react-router-dom的React项目打包部署后页面空白问题求助

问题原因 #

使用BrowserRouter时依赖HTML5 History API，Apache服务器默认会把/hello这类路由请求当作静态文件路径查找，找不到就返回404，导致React无法加载对应路由组件，最终页面仅能显示index.html里的标题和图标，主体内容空白。另外如果打包时资源路径配置错误，也会引发静态资源加载失败导致空白。

解决方案 #

1. 修正打包资源路径 #

如果项目不是部署在域名根目录（比如部署在http://your-domain.com/react-app），在项目根目录的package.json中添加homepage字段指定部署路径：

{
  "homepage": "/react-app/"
}

若部署在根目录，直接设置为：

{
  "homepage": "/"
}

添加后重新执行npm run build打包。

2. 配置Apache重写规则 #

在项目的public目录下创建.htaccess文件，添加以下规则，让所有路由请求都转发到index.html：

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

如果项目部署在子目录，修改RewriteBase为对应子路径，比如：

RewriteBase /react-app/

将打包后的build目录内容上传到Apache对应目录后，确保服务器已启用mod_rewrite模块。

3. 改用HashRouter（无需服务器配置） #

不想修改服务器配置的话，可将BrowserRouter替换为HashRouter，它会在路由路径前添加#，服务器不会解析#后的内容，避免404问题。修改路由代码：

import { HashRouter, Routes as Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import Hello from "./pages/Hello";

function Routes() {
    return (
        <HashRouter>
            <Switch>
                <Route path='/' element={<Home />} />
                <Route path='/hello' element={<Hello />} />
            </Switch>
        </HashRouter>
    )
}

export default Routes;

修改后重新打包部署即可。

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