React应用部署到buzz文件夹后显示空白页问题求助

你好，从你描述的情况和提供的配置文件来看，页面空白但控制台无报错，大概率是路由匹配或者资源路径的问题导致的——毕竟你的应用部署在子目录下，需要做一些针对性配置，下面是具体的排查和修复步骤：

1. 给BrowserRouter添加basename属性 #

你当前的路由使用了BrowserRouter，但没有指定basename参数。React Router默认会从网站根目录（/）开始匹配路由，而你的应用实际部署在/buzz/子目录，这就会导致路由无法正确匹配到对应的组件，最终显示空白页面。

修改你的路由文件，给BrowserRouter加上basename="/buzz"即可：

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import HomeComponent from '../Components/Home';
import LoginComponent from '../Components/Login';
import SignupComponent from '../Components/Signup';
import MyStoriesComponent from '../Components/Story/MyStories';
import AddStoryComponent from '../Components/Story/AddStory';

export default class Routes extends Component {
  render() {
    return (
      // 这里添加basename，指定应用的基准路径
      <BrowserRouter basename="/buzz">
        <Switch>
          <Route exact path="/" component={HomeComponent} />
          <Route exact path="/login" component={LoginComponent} />
          <Route exact path="/signup" component={SignupComponent} />
          <Route exact path="/mystories" component={MyStoriesComponent} />
          <Route exact path="/addstory" component={AddStoryComponent} />
        </Switch>
      </BrowserRouter>
    );
  }
}

2. 验证build后的静态资源路径 #

你已经在package.json里配置了homepage，这一步主要是确认配置是否生效。执行npm run build后，打开build文件夹里的index.html，检查里面的JS、CSS等静态资源引用路径是否是以/buzz/开头的，比如：

<script src="/buzz/static/js/main.xxxx.js"></script>
<link href="/buzz/static/css/main.xxxx.css" rel="stylesheet">

如果路径还是从根目录（/static/...）开始，建议删除build文件夹后重新执行npm run build，确保homepage的配置被正确读取。

3. 检查服务器的SPA fallback配置（如果需要直接访问子路由） #

如果上面两步完成后，首页能显示，但直接访问/buzz/login这类子路由时又出现空白，那就是服务器没有配置SPA fallback。因为BrowserRouter的路由是前端路由，服务器会把这些路径当成物理文件去查找，找不到就会返回空白或404。

以Nginx为例，你需要在配置里添加：

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

这样服务器会把所有/buzz/下的请求都转发到/buzz/index.html，让React Router来处理路由匹配。其他服务器（Apache、IIS等）的配置可以参考对应的SPA部署文档调整。

4. 确认组件是否被正确渲染 #

如果上面的步骤都试过了还是不行，可以在你的HomeComponent里加个日志，比如在componentDidMount（函数组件用useEffect）里写：

componentDidMount() {
  console.log('Home组件已挂载');
}

然后部署后打开控制台看看有没有这个日志。如果没有，说明路由还是没匹配到，回去检查basename是否拼写正确；如果有日志，那可能是组件本身的样式或者内容问题，比如组件内容是透明的，或者没有渲染任何可见元素。

按照这些步骤排查，应该能解决你遇到的空白页面问题。

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