React/GraphQL应用部署至Heroku后导航链接正常但手动输入URL报错求助

你遇到的是单页应用（SPA）客户端路由在服务器端的典型问题，我来帮你一步步梳理解决：

问题根源 #

React Router是客户端路由：当你通过导航栏点击链接时，是浏览器内部由React Router处理页面切换，不会向服务器发送新请求，所以能正常工作。但手动在地址栏输入路径（比如/profile）或刷新页面时，浏览器会直接向Heroku服务器发起该路径的请求，而Heroku默认的生产服务器会尝试寻找对应路径的静态文件，找不到就返回Cannot GET /xxx错误。

另外，点击Events链接显示空白页面，是因为你在App.js的Routes里没有配置/events对应的路由，React Router找不到匹配的组件，所以只渲染了外层的Header和Footer。

解决方案一：用serve包处理静态文件（纯前端Create React App项目） #

如果你的项目是纯前端的Create React App，没有自定义后端，可以用serve来部署，它会自动把所有路由请求fallback到index.html：

1. 安装serve作为开发依赖：

npm install --save-dev serve

2. 修改package.json的scripts部分：

"scripts": {
  "start": "serve -s build",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

• -s参数让serve将所有路由请求导向build/index.html，确保React Router能接管路由处理。

3. 重新部署到Heroku：
   Heroku会自动执行npm run build构建生产包，再运行npm start启动serve服务器，之后所有路由请求都会返回index.html，手动输入路径或刷新页面就能正常加载了。

解决方案二：配置Express服务器（带后端的项目） #

如果你的项目有自己的Express后端（比如GraphQL API和前端一起部署），需要在Express中添加路由fallback配置：

1. 在服务器入口文件（比如server.js）中添加以下代码：

const path = require('path');
const express = require('express');
const app = express();

// 先处理GraphQL API等后端路由逻辑
// ... 你的后端代码（比如Apollo Server配置） ...

// 托管React生产构建的静态文件
app.use(express.static(path.join(__dirname, 'client/build')));

// 所有非API的请求都返回React的index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build/index.html'));
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

2. 在package.json中添加heroku-postbuild脚本，确保Heroku部署时自动构建前端：

"scripts": {
  "start": "node server.js",
  "heroku-postbuild": "cd client && npm install && npm run build"
}

这个脚本会在Heroku部署时自动进入前端目录，安装依赖并构建生产包。

补充：处理未配置的路由（比如Events页面） #

对于导航栏里的/events、/features等路由，你需要在App.js的Routes中添加对应配置，否则点击链接会显示空白：

// 先导入对应的页面组件（如果还没开发，可以先写占位组件）
import Events from './pages/Events';
import Features from './pages/Features';
// ... 其他组件导入 ...

function App() {
  return (
    <ApolloProvider client={client}>
      <Container>
        <Router>
          <Header />
          <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/profile' element={<Profile />} />
            <Route path='/events' element={<Events />} />
            <Route path='/features' element={<Features />} />
            {/* 依次添加其他导航栏对应的路由 */}
          </Routes>
          <Footer />
        </Router>
      </Container>
    </ApolloProvider>
  );
}

如果某个页面还没开发，可以先创建占位组件：

// pages/Events.js
function Events() {
  return <h1>Events Page (Coming Soon)</h1>;
}
export default Events;

验证修改 #

完成配置后，重新部署到Heroku：

1. 提交代码：git add . && git commit -m "Fix Heroku routing issues"
2. 推送到Heroku：git push heroku main

现在手动输入/profile或刷新页面，就能正常加载组件；点击未开发的路由也会显示占位内容，而不是空白或404错误了。

内容的提问来源于stack exchange，提问作者Stephen Scott Moore